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
A mixin is a block of CSS styling that can be called anywhere to apply the block. With mixins we can also pass in an argument to make it a bit more dynamic as well. In my example I’m using a mixin to apply a border radius that can work across multiple browsers. We can change the radius however we want using ’n’. Using mixins makes our code a LOT dryer, and can save a lot of lines if we’re wanting to use the same styles over and over.
Variables
Since CSS has its own variables that you should absolutely use. All there is to say about preprocessor variables is that they are there. CSS variables can be updated during runtime, which preprocessor variables like Stylus and SASS, can’t. CSS variables can also cascade, meaning it can help a lot with responsive designing. The only reason you may want to use a preprocessor variable is if you’re worried about browser support. Otherwise, just use CSS variables.
Hashes
If we have a lot of data we want to store we could use hashes. In my example I’m using a hash to store a color theme. With that I can easily grab my colors from the hash wherever I need to put them. Another benefit of using a hash like this, is that if I wanted to change any one of those colors I could change it in one place and have it changed everywhere else.
Nesting
Just like with SASS we can nest our selectors to style elements and their children. Nesting is beneficial to save us from writing extra lines of code. It makes our styling cleaner and easier to read. We can also still omit things like curly brackets and semicolons. Giving our nesting a very minimalistic look. If nesting without curly brackets looks too confusing, you can still use them if you’d like.
Readability
As I mentioned plenty before, you can omit a lot of syntax with stylus. This can save plenty of lines, and make the file look so much more cleaner. But is this a good thing? Having no curly brackets or semicolons may be perfectly readable for someone who is used to Stylus or even other preprocessors. However, what if someone else who isn’t so well versed in preprocessors looks at this. They’re going to be pretty confused to say the least.
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!
