Shrink-wrapped CSS
A lightning introduction
to CSS preprocessors
whats they gots?
- variables
- functions and operations
- mixins
- selector nesting
Variables
- Give meaning to repeatable values
- Reduce the chance of slight differences
- Scoping for greater control
What the function!
(and operations)
- Basic maths operations
-
Colour functions
- Less-basic maths functions
width: (((1024 - (30 * 11) ) / 12) / 1024 * 100%); // 5.647786458%color: lighten(#bada55, 15%); // #d3e894height: (sqrt(1400) * 1em); // 37.416573867em
Mixins
with all the fixin's!
- Keeps development code DRY
- Pass in parameters for awesome good
- Rudimentary inheritance (you should probably avoid this)
selector nesting
- Really simple scoping
- Keeps your module styles DRY
- Follow the Inception Rule
.foo { // .foo {...} .bar { // .foo .bar {...}.baz{...} // .foo .bar .baz {...}}}
Go forth and make
awesome internets!
Shrink-wrapped CSS
By juanojeda
