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:
Convert Sass to SCSS:
sass-convert style.sass style.scss
Convert SCSS to Sass:
sass-convert style.scss style.sass
** Note that the above command does not generate CSS files.
Install Compass and Sass:
Sass and Compass get installed as Ruby gems so you’ll need to have Ruby on your machine. If you’re on Windows, you can run the Ruby Installer. But I am going to write for Linux platform as I am using Linux Mint OS. On Linux, Rails Ready provides several Ruby essentials. On OS X, Ruby is already installed by default so Ruby just works.
You can also download the latest or stable version of Ruby to install manually on your system from Ruby Programming Language site.
Now execute the below command to install Compass on your system:
sudo gem install compass
Lets execute the below command to install Sass on your system:
sudo su -c "gem install sass"
Create a simple Sass Project:
Lets go to your project folder, for example we will use the project name atoz.reviews at server root directory (www). Now we will start our steps to create the simple Sass project.
Step 1: Create a config ruby file “config.rb” and add the following script to the file.
preferred_syntax = :sass http_path = '/atoz.reviews/' css_dir = 'stylesheets/css' sass_dir = 'stylesheets/scss' images_dir = 'images' javascripts_dir = 'js' relative_assets = true line_comments = true # output_style = :compressed
Here you can see that path of different folder (like your sass folder, css folder, images folder, javascript folder, etc) are mentioned. The last line is commented so that the css output comes as readable version. If you have finished your development and ready for the online version just remove the #(hash) to output a compress version of your styles.
Step 2: Create a sass file (for example the file name is main.sass) at stylesheets/sass and write your sass syntax.
Step 3: Using you terminal enter to the project folder where the config.rb exist and execute the below command
compass watch
Wish you will find the main.css file at stylesheets/css folder.
Cheers!
