Learn Stylus... right now

Published Aug 24, 2017
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

  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

  text-decoration: none
  color: inherit // reasonable defaults

  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.


Setup a meeting with me, and I can show you how to write enjoyable markup and Stylus rules to make authoring websites/apps super fun.

Discover and read more posts from sheriffderek
get started