Stylus, The Minimalist

Let’s say you’re styling a webapp, and you have been writing CSS for hours and hours. Over and over you are writing curly brackets, colons and semicolons. You end up having to write the same lines over and over just to get the style just right. You wonder to yourself, ‘there has to be another way…’, and it comes to you. Preprocessors.

Us being lazy creatures, we want to put in the least amount of effort. LESS has some nice features inspired by SASS, but we are forced to use curly brackets and all that jazz. SASS syntax gets a bit cleaner since you can omit the curly brackets, but still keeps colons in it’s syntax. With Stylus we can get the true minimalist syntax, where curly brackets, colons, and semicolons are all optional.

The flexibility of being able to choose to use things like curly brackets makes this preprocessor very flexible. Overall I found that Stylus syntax ended up being a lot cleaner than SASS. However, like SASS and other preprocessors, we have access to powerful tools like mixins and nesting. For the rest of this blog I will go over some of the more useful things in stylus that can make our lives a bit easier when we’re styling.

Mixins

Mixin it up!

Variables

Don’t use these!

Hashes

Good with ketchup!

Nesting

Nesting with a side of variables being used with math, and a hash call to garnish

Readability

The great thing about Stylus though is that we can mix and match. You can have curly brackets if you want them, semicolons if you want them, and no colons if you don’t want them. Stylus is very flexible this way, and can accommodate your preferred style. However, I would urge you to keep consistency within your files.

Long story short, there really aren’t a lot of functional differences between SASS, LESS, and Stylus. They all can achieve the same goal, making styling more manageable. The biggest difference between these is the syntax. The flexibility of the syntax makes Stylus by far my favorite preprocessor to use. However, this is truly preference, and what preprocessor you will use will most likely depend on what the team you’re working on. If you are looking for a preprocessor I highly recommend you trying Stylus out.

A very helpful Stylus cheatsheet can be found Here!

Software Engineering student at Flatiron School