Stylus is a minimalist CSS preprocessor that offers dynamic functionality like LESS and Sass but with a more streamlined syntax. It has features like optional syntax characters, accessing properties within their own blocks, extending nested selectors, and transparent mixins. Stylus is well-suited for those comfortable with node.js environments and who prefer a concise syntax.
6. Access Properties Within Their Own Block
#modal
position absolute
width 572px
height 386px
top 50%
left 50%
margin-left -(@width/2)
margin-top -(@height/2)
7. Access Properties Within Their Own Block
#modal {
position: absolute;
width: 572px;
height: 386px;
top: 50%;
left: 50%;
margin-left: -286px;
margin-top: -193px;
}
12. Syntax Differences from LESS & Sass
● Assign variables via the equals sign
● Extend-only placeholder selectors
● No property nesting
● Libraries
13. Assign variables via the equals sign
//$ is optional, but recommended
primary-color = #999
$secondary-color = #666
//In Sass, the $ is mandatory. See below.
$primary-color: #999