Stylus, The Minimalist

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.

Mixin it up!

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.

Don’t use these!

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.

Good with ketchup!

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.

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Riley M. Iverson

Riley M. Iverson

A Full-Stack Software Engineer working with React.js and Ruby on Rails.