Stylus

About

As front-end developers every single day we create many CSS files, themes, prototypes, etc. etc. and of course, maintain that kind of code with just CSS, become almost impossible. Eventually, we start to repeat code or create unnecessary rules that are difficult to clean when we don't need them anymore. For that reason when I started to know about CSS preprocessors I was really happy, no more repeated code, clearer syntax, modular stylesheets, variables, mixins, this is an incredible world, worth it to study and apply. In this page, there are some useful resources to use Stylus, one of the best preprocessor I have found.

Please, feel free to share this content. Official Github page of  Stylus http://learnboost.github.io/stylus/

Installing Stylus and nib using Node.js

Stylus works perfectly with Node Package Manager using a package called stylus, you can obtain this package from https://www.npmjs.org/package/stylus using following command (it works for UNIX-like OS and Windows):

npm install -g stylus nib

As you can see, we can also use another great complementary library called nib, but what is nib?

Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

Compile and watch a file for changes (including nib)

stylus -w -u nib stylus/my-awesome-template.styl -o css/

Compile, compress and watch

stylus -w -c -u nib stylus/my-awesome-template.styl -o css/

Extra utilities

Nib: http://visionmedia.github.io/nib/

Command line executable

Stylus executable

 http://learnboost.github.io/stylus/docs/executable.html

Usage

stylus [options] [command] [< in [> out]][file|dir ...]

Options

Shortcut Command Description
-i --interactive Start interactive REPL
-u --use <path> Utilize the Stylus plugin at <path>
-U --inline Utilize image inlining via data URI support
-w --watch Watch file(s) for changes and re-compile
-o --out <dir> Output to <dir> when passing files
-C --css <src> [dest] Convert CSS input to Stylus
-I --include <path> Add <path> to lookup paths
-c --compress Compress CSS output
-d --compare Display input along with output
-f --firebug Emits debug infos in the generated CSS that can be used by the FireStylus Firebug plugin
-l --line-numbers Emits comments in the generated CSS indicating the corresponding Stylus line
-P --prefix [prefix] Prefix all css classes
-p --print Print out the compiled CSS
  --import <file>  Import stylus <file>
  --include-css Include regular CSS on @import
-D --deps  Display dependencies of the compiled file
  --disable-cache  Disable caching
-r --resolve-url Resolve relative urls inside imports
-V --version Display the version of Stylus
-h --help Display help information

About the author

Enterprise Web Developer

Alex is an experienced technology professional. His background includes:

  • Web Technologies: Semantic Web (RDF, OWL), MVC Frameworks (CakePHP, CodeIgniter) Content Management Systems (Drupal, Joomla, WordPress), JavaScript libraries (jQuery, Mootools), CSS3, HTML5, mobile web (Sencha, jQuery mobile), Operating Systems, and,
  • Research: Complex Systems (Cellular Automata in specific), Artificial Intelligence, Computer Graphics and Computer Simulation to create computer models of living.