Stylus


This is a brief overview and example of how Stylus works
To see the original documentation go to http://learnboost.github.io/stylus/

My working example is
http://glynrob.com/examples/stylus/index.html

which can be downloaded at
https://github.com/glynrob/stylus

How Stylus works:
Stylus is a CSS-preprocessor.
The syntax for Stylus is much more verbose compared to other preprocessors.

Using the .styl file extension, Stylus accepts the standard CSS syntax, but it also accepts some other variations where brackets, colons, and semi-colons are all optional.

compiles to

Running Stylus

Node.js is required to compile the css file

Windows Installer
http://nodejs.org/
then install stylus in command Prompt
npm install stylus -g
Then to compile your CSS file you go to the location of your .styl file and run
stylus < styles.styl > styles.css

Linux or Mac Compiler
Either use a pre-compiled binary if one is available, otherwise compile it yourself http://nodejs.org/
install stylus
npm install stylus -g
Then to compile your CSS file you go to the location of your .styl file and run
stylus < styles.styl > styles.css

HTML Code

Your html is as you normally would build your page.
My example is just 3 buttons on a page

Obviously include the location of your .css in the head of your webpage.

Comments

Variables

When designing a website, the colours used are always slightly off the default html color options.
Red is something like: #BF3130 for example.
When adding new elements to the website you have to look back to find the actual hex value you are using to keep consistent.
Variables allow you to set these in the CSS and call upon them when required.

Mixins

cross-border-radius(args) 
  -webkit-border-radius args
  -moz-border-radius args
  border-radius args

.btn
  cross-border-radius 10px

These are similar to functions in javascript, but you do not place brackets around the variables you are passing in.
You add a function name and list the variables next to it.
This way you can call this mixin on any classes you wish and cut down your code allot.
This example allows me to add 1 line to any class to add a border radius to that class supporting cross browser.

Functions

cross-box-shadow(args)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

.btn
  cross-box-shadow (5px, 5px, 6px, rgba(0, 0, 0, 0.3))

These are similar to Mixins where the only different is you place brackets around the variables you are passing comma seperated.

Nested Rules

This allows you to write clean code so you can easily see what styles are being added to child styles.
So instead of

You can write

Clearly showing that hovering over an A tag would change the color of the text.
You can do this for any classes as many times as you would like.

Built-in function options

http://learnboost.github.io/stylus/docs/bifs.html for a full list of functions available
My example only uses desaturate for the sake of an example in my code.

And to compress your css file you can use

stylus < styles.styl > styles.css

So you commit and push your code updates live.
As simple as that.

One thing to note is the comilper will fail if you have inproper indentation. So keep an eye on spaces and tabs in your .styl

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *