Learn Stylus... right now
I'm not going to show you how to install Stylus - or how to use the many many build-tool choices... BUT - here's a primer on the syntax....
First there was less, then Sass, then Stylus, then PostCSS - but which is one is best? Well - it's clearly Stylus. If you don't think so... then you likely haven't used it.
Stylus is a CSS preprocessor. It allows you to write styles in a special syntax that JavaScript will then compile into CSS for you. You can use none or many of it's features. Writing standard CSS in the file is also supported, but Stylus is 'indent-based', so you have to keep consistant indents. Just follow that one rule.
They say you can leave off : and ; and that you don't need to use $ for variables... but trust me - you should write it like I do below [[[cite github reference for eventual mandatory $ and :]]].
I'll let the code speak for itself. Try it out in this CodePen.
$color = #ff0066 // three variables
$pad = 10px // padding unit
$thick = 5px // border thickness
.parent
padding: $pad // using a variable
.parent // 'nesting'
border: $thick solid $color
.child // nested selector
color: $color
/* nesting generates this:
.parent {
padding: 10px;
border: 1px solid #ff0066;
}
.parent .child {
color: #ff0066;
}
*/
loud-voice() // mixin
font-size: 20px
font-weight: 700
color: $color
.thing // using a variable and mixin
padding: $pad
loud-voice()
a
text-decoration: none
color: inherit // reasonable defaults
.button
display: inline-block
padding: $pad
background: $color
color: purple // why ever use a non-variable?
border-radius: $pad*.5 // math expression
border: $thick solid @color // use the 'color' parameter value as this color!
&.strong-button // nested class with '&'
padding: $pad*2
&:hover // nested 'state' with '&'
background: white
// NOW functions???
// if you find a reason to use them... then - that's up to you - I barely ever use them.
