Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your style sheets easier to organize and maintain. Compass uses Sass. Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and tested best practices for Sass.
Once you finished with the
installation of Ruby Germs and Sass on your system, install compass in
the next step. If you've not yet installed Ruby Germs and Sass on your
system, please refer my following blog for installation:
Install SASS on Windows Using Ruby Gems
Now we are going to install Compass.
Now we are going to install Compass.
Open command prompt (CMD) and type the following command.
It will install Compass on your system. You will get the following message after installation of Compass.
Next we are going to install css parser.
It gives a count of the Sass rules, properties, mixins defined and
mixins used as well as the CSS rules and properties that get output
from your Sass-style sheets.
After installation, it will give you the following message:
Now we are going to create one sample project.
You can create project using the following command:
After creation of project, you will get the following message.
In the next step, you have to compile Sass to css. So for that purpose, you have to add watch as in the following screenshot:
Once the watch is started, you will get the following message.
This kind of folder Structure is created once you create project.
Now, we are writing some Sass code and will send its impact on css file using Compass.
I use Atom Editor (Open Source) for making this project. You can even use Notepad++, Sublime Text, etc for developing project.
You will see config.rb file in your project.
You can see all the references to the different directories Compass will need in order to compile your CSS.
Now I am going to write some Sass code in screen.scss file.
After saving the complete code, changes will be reflected to css file as well as on command prompt. This could happen because of Compass.
style.css looks like the following:
I hope this quick tutorial made your Compass working environment possible.
No comments:
Post a Comment