Saturday, 29 November 2014

Getting started with Sass and Compass.

Introduction

Syntactically awesome style sheets (Sass) is one of the css pre-processors together with less that came to limelight in the yesteryears' as an extension used in easily and quickly writing css codes so as to produce a clean and semantic css. It allows you to use features that were only avaliable in full fledged programming languages like variables, mixins, functions, control directives among others. This preprocessor when used minimizes code repetition thereby increasing code reuse and structure. 

In this article, I will try to introduce the sass preprocessor, showing you how to install it together with compass and how to compile your sass documents into css. The sass pre-processor has two variants: the phyton flavored one using tab spaces to make code depth with the .sass extension and the css flavored variant that looks for all intents and purposes like the good old css. In this article and the others that are forthcoming, we will using the .scss variant.

Installation 

Sass

Because sass is a ruby gem, it requires the presence of a ruby installer in the machine which it will be used in. If you are using Mac, congratulations! Mac comes with the ruby installer pre-installed. Linux and Windows users on the other hand will have to install ruby before using sass. For Linux users, ruby installer can installed using the apt package manager, rbenv, or rvm. Windows users like me should head over to www.rubyinstaller.org to install the most stable version of the installer (1.9.3-p551, 2.0.0-p598 and 2.1.5 as at the time of this writing).

After having installed the ruby installer, the next thing to do is to install the sass gem. This can be done is several ways depending on whether you're comfortable using a GUI or the command line. For graphic user interface fans there are several sass editors that will install the sass gem for you without you tinkering with the command line. Such app includes 


  1. Koala (has windows, Mac and Linux version)
  2. Compass.app (has version for Windows, Mac and Linux)
The above is not a comprehensive list. For a full list of editors capable of compiling sass codes head over to sass-lang.com.

For command line ninjas, to install sass gem in your machine,  run the following code in the command line or terminal as the case maybe:

gem install sass

If the command above throws an exception or if you are using a Mac machine, it's likely that you have to run this code instead:


sudo gem install sass


This command will download and install sass to your machine.

Compass

If sass is a very powerful machine, compass then will be all the cushions and stuffs added to it so as to make using it flexible, easy and an unforgettable experience. Compass is a Css authoring framework which uses the sass stylesheet language to make authoring css powerful and easy. It serves as a library of sorts to sass and comes bundled up with many nifty mixins and functions which will aide you in producing a clean and semantic style sheet in no time. 

Just as Sass, Compass is also a ruby gem and can be installed using a command line (Gui fans please do not be frightened) . To install Compass, run the following code in the command line (or terminal):


gem update --system

gem install compass 


Note: Mac users should remember putting sudo before gem.

And thats it.

Creating a compass project.

Most of the apps listed above can create a compass project. However, to create a compass project using the terminal/command line, just point your terminal to the root folder of your project, then run either of  the following commands.

  1. compass create
  2. compass create  --sass-dir "sass-dir-name" --css-dir "css-dir-name" --javascripts-dir "js-dir-name" 
  3. compass create --bare  --sass-dir "sass-dir-name" --css-dir "css-dir-name" --javascripts-dir "js-dir-name" 
Either of the codes above will create a compass project. But its usage will depend on the amount of control you want to handover to compass. 

The first code above will create the compass project with the config.rb file in the root of the project. However it will also create sass and css files like ie.scss/css, reset.scss/css  and screen.css. Also, it will assume the default names of  "stylesheets", "sass", "images", "javascripts" among others in naming the folders and inside the config.rb file.

The second code on the other hand acts exactly like the first code except that you will able to name your folders appropriately.

The only difference between the last code and others is that it creates a bare project. That is it does not create either sass files or css files for you. It leaves the folders that it create empty.

Conclusion

In this article, we have seen what sass is all about, how to install it and compass and how to get started in using it. I hope that you have learnt most of this information outlined here. And that it will be very useful to you in your future projects. Happy Sassing!





No comments:

Post a Comment