Go to the profile of Cassy Keeler
Cassy Keeler

Stylus Examined

Over the course of the last few months, I have been learning more and more about CSS preprocessors as I created presentations in order to explain what I had found to my classmates. I have had the opportunity to use three of the most popular options currently available. CSS preprocessors are wonderful expansions of typical CSS and they offer a huge number of benefits over writing CSS directly. If you have read either of my previous posts, you will likely know that I have discovered a fondness for Stylus in particular. As such, the purpose of this blog post will be to have a more in depth look at Stylus and the more advanced features it boasts.

Built In Functions

There are a number of functions that are built into Stylus by default. These functions perform a variety of different operations and actions. They can be very useful for creating CSS which changes based on situation. Some color functions will transform a color during compilation. This can be extremely useful for creating gradients, darker hover colors, and many other things. Here are some examples of various functions available to Stylus by default.

/*These are explinations of the functions*/
//These are the return value of the functions
/*This function returns the red component of the color given*/
red(#C00)
//204
/*This function returns the color that results when the given color is changed by the optional second value argument*/
red(#C00, 255)
//#F00
/*This function returns true if the provided color is dark, false if it is not*/
dark(black)
//true
/*This function returns true if the provided color is light, false if it is not*/
light(red)
//true
/*This function returns the index of the value from the list*/
list = red, blue, green, white
index(list, blue)
//1
index(1px green solid 15%, solid)
//2
/*This function returns whatever is used to seperate a list when provided with the variable that contains the list*/
list = a, b, c, d
list-separator(list)
//','
/*This function converts the number or equation provided into a percentage*/
percentage(29)
//29%
percentage(57 / 100)
//57%
/*This function returns true if the unit provided is even else it returns false*/
even(55)
//false
/*This function returns true if the unit provided is odd else it returns false*/
odd(55)
//true

Before CSS preprocessors the easiest way to apply the same styles to multiple elements at once was:

p,
ul,
ol {
   color: #00F;
   font: Times New Roman;
}

If each of these elements requires no other styling this works great. However, if we are going to further style these elements another selector must be created for each which in turn leads to messier and harder to maintain code. For example:

p,
ul,
ol {
   padding: 3px;
   margin: 15px 5px;
   font: Times New Roman;
}
p {
   border: 2px dashed #008000;
}
ul,
ol {
   color: 00F;
   text-transform: uppercase;
}

To avoid this issue, Stylus allows the use of inheritance, the ability for other CSS selectors to inherit the properties of another selector. Stylus achieves this through the use of @extends (or @extend, one is an alias of the other). It is also possible for multiple selectors to be extended at once. They just have to be separated by a comma. Using our p, ul and ol selectors the code would look like this:

.holder
   padding: 3px;
   margin: 15px 5px;
   font: Times New Roman;
p
   @extend .holder
   border: 2px dashed #008000;
}
ul,
ol {
   @extends .holder
   color: 00F;
   text-transform: uppercase;
}

Libraries and Plugins

To further extend the features available in Stylus there are also a few libraries and plugins designed specifically to add functionality to Stylus. The first and more commonly used is Nib. It is a “powerful library for the Stylus CSS language that provides robust cross-browser CSS3 mixins to make your life as a designer easier.” According to the Nib website, http://nibstyl.us/. Rupture is a media query utility designed specifically to work with Stylus. More information on this plugin is available here: http://jenius.github.io/rupture/. Lastly I want to mention Jeet, even though it isn’t Stylus specific. It is a grid system that works very well with CSS preprocessors to make working with grids easier for developers. More information can be found at the Jeet website: http://jeet.gs/.

Bonus Trivia

Here are a couple pieces of information that don’t really fit elsewhere in this post but I think they bear mentioning. The first is in regards to comments. Any double-slash comment (//comment) will be ignored during compilation, so it will not appear within compiled CSS file. Slash-asterisk comments (/*comment*/), on the other hand, will be seen in the compiled CSS file. The second interesting, and beneficial, piece of trivia is that while CSS doesn’t report where the errors have occurred and you can spend significant amounts of time hunting them down CSS preprocessors will report any errors that appear when it attempts to compile into CSS.

Though I have provided a number of examples and a, hopefully, understandable explanation of some of the more in-depth features available in Stylus there are many, many more available. The Stylus website, http://stylus-lang.com/, is a wonderful resource to learn even more about Stylus and to even try your hand at the language before committing to its use. Even if you decide Stylus is not for you, I very much recommend the use of a CSS Preprocessor in the development of web applications. They are incredibly useful and extensive tools.