Selectors

Stylus does not change the original syntax of CSS selectors—IDs are selected using #, classes using ., direct children using >, and so on. It just adds some additional features on top of CSS to make defining style declarations easier and dynamic.

Selector blocks

Selectors and style declarations in Stylus are superset of the standard CSS selectors and style declarations; hence regular CSS is valid Stylus:

#content {
  color: #999;
  padding: 5px;
  box-shadow: 5px 5px 1px #ccc;
}

However, colons, semicolons, commas, and braces are optional in Stylus:

#content
  color #999
  padding 5px
  box-shadow 5px 5px 1px #ccc

Omitting colons can make things a little confusing, so you might want to keep the colons to help in visually demarcate properties and values:

#content
  color: #999
  padding: 5px
  box-shadow: 5px 5px 1px #ccc

Omitting the braces comes with a price—we now use indentations to define the selector blocks. You can use either tabs or spaces for indentation. Choose whichever you...