Recently my team leader has decided use sass for our web projects and I have no idea about sass or compass, even never tried to search about it, lol! So just started searching for tutorials to configure Sass for my project.
Here I am going to write about the following steps that are used to setup and configure Sass for my project as my note for future reference, But wish it will also helpful for them who want to get started with Sass from scratch.
- What is Sass?
- Install Compass and Sass
- Configure Sass and Create a test project
What is Sass?
Sass (Syntactically Awesome StyleSheets) is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
There are two syntaxes available for Sass:
- The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning.
- The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.
Either syntax can import files written in the other. Files can be automatically converted from one syntax to the other using the sass-convert command line tool: Continue reading “Getting started with Sass and Compass from scratch”