Using CSS compilers

As any CSS junkie already knows, using standard CSS to create style sheets can be tedious, redundant work. Many designers and developers prefer to use a dynamic style sheet language or preprocessors, such as Less, Stylus, and SCSS/SASS.

Meteor not only enables the use of preprocessors, but also treats them just like any other file so that changes are reflected immediately.

This recipe will show you how to enable some of the more popular CSS compilers in your Meteor application.

Getting ready

Nothing is needed to prepare for this recipe, other than having Meteor installed, and a project created so that you can begin using CSS compilers.

How to do it…

We're going to cover three different preprocessors, as they all work in a similar way.

Using Stylus

1. Open a terminal window and navigate to the root folder of your project.
2. Enter the following command:

   $ meteor add stylus
   

   You should see a response similar to the following in the terminal window:

   stylus  added, version 1.0.7
   

   Stylus is now installed and ready to be used. You can test this by creating a .styl file and adding a script (for example, add test.styl to your client/styles folder).

When you start your Meteor application with the meteor command, Stylus files will be processed and proper CSS will be rendered.

Tip

You can use the nib code in Meteor as well. Just add @import 'nib' to your .styl files, and Meteor takes care of the rest.

Using Less

1. Open a terminal window and navigate to the root folder of your project.
2. Enter the following command:

   $ meteor add less
   

   You should see the following response in the terminal window:

   less  added, version 1.0.14
   

   Now the Less package is installed, and you can use the Less stylesheet syntax to create your CSS.

As with Stylus, you can test this by creating a .less file and adding some style declarations (for example, add test.less to your client/styles folder).

When you start your Meteor application with the meteor command, the Less files will be compiled by Meteor into standard CSS and rendered as usual.

Tip

If you're fond of using @import statements in your Less stylesheets, make sure you use the .lessimport extension. Otherwise, Meteor will automatically import and compile any and all .less files it can find.

Using SCSS / SASS

1. Open a terminal window and navigate to the root folder of your project.
2. Enter the following command:

   $ meteor add fourseven:scss
   

   You should see a response similar to the following in the terminal window:

   fourseven:scss  added, version 2.1.1
   

SCSS and SASS files can now be used to style your CSS. Just as before, you can test this by creating a .scss or .sass file and adding some style declarations (for example, add test.sass to your client/styles folder).

When you start your Meteor application with the meteor command, the SCSS or SASS files will be compiled by Meteor into standard CSS and rendered.

How it works…

When you installed any of the preprocessors with the meteor add command, it installed the corresponding npm packages tailored to work inside of Meteor.

As with other files, Meteor will monitor changes to any *.styl, .less, .scss, and .sass files, compile the changes into CSS, and render the changes immediately.

See also

• The Adding Meteor packages recipe in Chapter 2, Customizing with Packages