You’ll learn how to use command line to:
- Compile preprocessor (Stylus, Sass and LESS) code for CSS
- Autoprefix CSS
- Compress, combine and clean CSS
- Compile Jade for HTML
Note: this tutorial assumes you’ve already completed the previous tutorials in this series. If you haven’t, you’ll find it helpful to go back and follow those before proceeding.
If you’ve never worked with CSS preprocessors before drop everything immediately and try one out. Once you find a preprocessor you like that fits your coding style, follow along with this tutorial to learn codes for that preprocessor.
The three preprocessors that are generally considered to be the ones to choose from are Stylus, Sass / SCSS and LESS. In this tutorial we’re going to cover how you can use the command line to compile code for each of the three but you don’t have to learn all of these; just concentrate on your favorite preprocessor.
The LESS preprocessor is very popular, and is probably most well known for its employment in the Twitter Bootstrap framework. Since I personally love Bootstrap, it’s my favorite preprocessor. LESS is a great first preprocessor to start working with as it’s very similar to writing in straight CSS.
Read more about LESS at: http://lesscss.org/
To install LESS globally, enabling you to use it to compile “.less” files anywhere, run this command:
[shell][sudo] npm install less -g[/shell]
Open a terminal in the folder housing the LESS file you want to compile and use the command
lessc followed by the name of the file, a
> symbol, then the name you want your compiled CSS file to have:
[shell]lessc source_file.less > compiled_file.css[/shell]
This command will compile “source_file.less” into “compiled_file” in the same directory.
You can read all about Stylus at: http://stylus-lang.com/
To install Stylus globally, enabling you to use it to compile “.styl” files anywhere, run this command:
[shell][sudo] npm install stylus -g[/shell]
The easiest way to compile with Stylus is to use this one line command:
[shell]stylus < example.styl > example.css[/shell]
You also have the option to add additional flags to this command, such as using the
--compress flag to remove whitespace from the resulting CSS file:
[shell]stylus –compress < example.styl > example.css[/shell]
As an alternative to compiling one file at a time, you can compile all the Stylus files in one directory into CSS files in another directory. To do this, after the
stylus command, specify the source folder, then use the
--out flag followed by the destination folder.
For example, to compile all the Stylus files from a folder named “source_files” into “assets/css” use:
[shell]stylus source_files –out assets/css[/shell]
Note: the folder you’re compiling into must already exist before you run the command as it will fail if it can’t find the specified folder to output CSS files to.
There are several other options you can leverage when using Stylus via the command line. To read all about them visit: http://stylus-lang.com/docs/executable.html
Sass / SCSS
Sass is very likely the most popular preprocessor at this point in time. It is incredibly powerful in what you can achieve with it and has a very large and active community. It’s supported by well known third party libraries like Compass, Bourbon and Susy.
Read more about Sass at: http://sass-lang.com/
Sass was first created to run on Ruby, and as such if you’re looking for 100% full feature completeness and support, it’s the option you may wish to choose. For example, if you want to use Compass the easiest way is to stick with Ruby compilation.
LibSass was created as an alternative, and one of the options it makes available is compiling sass via an npm package instead. This approach compiles sass much faster, bringing a compile time of around 5 seconds through Ruby down to under half a second through LibSass. However, you may find certain features and third party code are unsupported.
Which you choose is completely down to personal preference, but as a rule of thumb I would suggest going with LibSass for speed unless there’s something specific (like Compass) for which you need Ruby compilation.
Regardless of your choice, we’ll cover using both so you’re all set in either event.
1. Install Ruby Sass
To compile Sass via Ruby, you’ll first need to have Ruby installed on your machine.
If you’re on Mac you’re in luck as Ruby already comes preinstalled so you don’t have to do a thing.
If you’re on Windows, head to http://rubyinstaller.org/ then download and run the installer you find there. Next, install Sass by running this command:
[shell][sudo] gem install sass[/shell]
Sass should be automatically downloaded and installed for you. To double check the installation has been successful run the command:
You should see the version number and name of your Sass installation displayed in your terminal:
Compile with Ruby Sass
To compile a file using Ruby sass just type
sass, followed by the name of the input file, a space, then the name you’d like your compiled CSS file to have:
[shell]sass source_file.scss compiled_file.css[/shell]
Watch with Ruby Sass
Ruby Sass also has an inbuilt “watch” function (we’ll cover more on watching later) that will watch your files for changes and automatically recompile them every time they’re saved.
To use it, add the
--watch flag to your command, then separate the names of your source and compiled file with a colon instead of a space:
[shell]sass –watch source_file.scss:compiled_file.css[/shell]
You can also specify whole directories to watch and to output to, instead of single files, like so:
[shell]sass –watch source/sass:assets/css[/shell]
Once watching is initiated you should see something like this in your terminal:
Getting More Info on Commands
To read about all the options available via command line with Ruby Sass run:
A read out of the command line docs will be displayed in your terminal.
You can use this
--help flag to get more information on any command you use. Just type the name of the command followed by
--help and you’ll get information similar to the above in each case.
2. Install LibSass / node-sass
If you go with LibSass, you can get started with the same method you’ve used to install npm packages earlier in this tutorial series.
To install node-sass globally, run this command:
[shell][sudo] npm install node-sass -g[/shell]
Compile with node-sass
To compile a file type
node-sass followed by the name of the input file and the name you’d like your compiled CSS file to have:
[shell]node-sass source_file.scss compiled_file.css[/shell]
--outputflag and destination directory in between the names of your input and output files:
[shell]node-sass source_file.scss –output assets/css compiled_file.css[/shell]
Watch with node-sass
Like Ruby Sass, node-sass also uses the
--watch flag to enable automatic compilation of your files on change:
[shell]node-sass –watch source_file.scss compiled_file.scss[/shell]
[shell]node-sass –watch source/sass/* –output assets/css[/shell]
/*at the end to specify you want to all the files within.
Stopping a “watch” Process
When you have a “watch” process running you can stop it by either:
- Closing down the terminal
- Pressing CTRL + C
Autoprefixer is an npm package that checks with CanIUse.com (bookmark it) to get up to date information on which CSS properties need vendor prefixes and which don’t. It then automatically handles adding required vendor prefixes into your code.
This can be incredibly helpful as, unless you’re monitoring browser updates constantly, you can easily find yourself including browser prefixes you don’t really need anymore. It also means you can write all your CSS without having to think about prefixes, and let Autoprefixer take care of them for you.
For example, autoprefixer will turn this code:
animation: all 4s ease-in;
animation: all 4s ease-in;
-ms-animation: all 4s ease-in;
-webkit-animation: all 4s ease-in;
-moz-animation: all 4s ease-in;
-o-animation: all 4s ease-in;
Read more about Autoprefixer at: https://www.npmjs.com/package/autoprefixer
Install Autoprefixer globally with:
[shell][sudo] npm install autoprefixer -g[/shell]
Autoprefix a CSS File
To autoprefix a CSS file use the following command:
Unlike compiling a preprocessor file, this will not create a second file by default. The file you target will be updated, with the correct prefixes added in directly.
If you do want Autoprefixer to generate a second, separate file add the
--outputflag followed by a name for your prefixed css file:
[shell]autoprefixer unprefixed.css –output prefixed.css[/shell]
You always want the CSS you deploy on your sites to be crunched down to the smallest size possible. To achieve this you can use optimization techniques of:
- Compression – removing white space and comments
- Cleaning – modifying the code itself to take up less space
Compressing with Preprocessors
Stylus, Ruby Sass and node-sass all have the ability to compress your CSS during compilation.
In Stylus, include the
[shell]stylus –compress < source_file.scss > compiled_file.css[/shell]
In Ruby Sass include the
--style flag, followed by
[shell]sass source_file.scss compiled_file.css –style compressed[/shell]
In node-sass add the
--output-style flag followed by
[shell]node-sass –output-style compressed source_file.scss compiled_file.css[/shell]
Cleaning and Compressing with clean-css
If you’re not using CSS preprocessors, or you just want maximum code optimization, you can use the clean-css package which will put your CSS files through more in depth compression processes.
Regular compression processes typically just remove white space and comments from your CSS. The clean-css package on the other hand can also do things like:
- Merging duplicated selector names
- Merging duplicated properties within the same style
- Rounding off numbers with many decimal places
- Removing trailing semicolons and spaces at the end of selector styles
Merging duplicated selectors can be handy, for example, should you like to have all the layout for a certain class initially in a “” file, while the coloring for the same class is initially in a “ ”.
Rounding off numbers is great for when you’ve used a preprocessor function to convert a value into rem units and you end up with something like 2.3649858573rem. With clean-css that number would be rounded off to two decimal places, bringing it to a much tidier 2.36rem value.
You can read more about clean-css at: https://github.com/jakubpawlowicz/clean-css
Install clean-css globally with the command:
[shell][sudo] npm install clean-css -g[/shell]
To clean a CSS file use:
Note: Even though the package name “clean-css” has a hyphen in it, be sure to use
cleancss without a hyphen to start your commands.
To specify a new file name for clean-css to generate use the
-o flag followed by the new file name, before the name of the file you’re targeting:
[shell]cleancss -o cleaned.css style.css[/shell]
There are several other command options available for clean-css, which you can read all about at: How to use Clean CSS CLI.
Jade is an amazing language that compiles into HTML, and makes it possible for you to both write your code in shorthand so development is much faster, and create your own templating systems so you can save yourself on rewriting code. I’m not a big fan of it personally because writing html is fun for me but if you’re into it, here’s a quick demo on that too.
Read more about Jade at: https://www.npmjs.com/package/jade
To install Jade globally run the command:
[shell][sudo] npm install jade -g[/shell]
Jade, created by the same person as Stylus, uses the same basic command syntax of
> signs to compile a file:
[shell]jade < index.jade > index.html[/shell]
This command will compile “” into “ ” in the same directory.
To compile all the Jade files in a certain directory use:
To set the directory you want your HTML files to be written to place the
--out flag between the name of the input and output directories:
[shell]jade src_dir –out html_dir[/shell]
To use Jade’s watch function for automatic compilation on saving, pass the
--watchflag right after the jade command.
For single files:
[shell]jade –watch < index.jade > index.html[/shell]
Or for full directories:
[shell]jade –watch dir_name[/shell]
[shell]jade –watch dir_name –out html_dir[/shell]