Getting started with Sass (Installation)

Requirement:-

Installing Sass on Windows/Linux/Mac platform.

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 fully CSS-compatible syntax and adds features to combat shortcomings. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly; particularly with the help of the Compass style library. It is a preprocessor like CoffeeScript & Haml

Sass Compiler
Flow of Sass


    Installing Sass

    Sass has a Ruby dependency and we need to install Ruby first before starting with Saas installation.

    Linux Platform

    We can install Ruby through the apt package manager, rbenv, or rvm.

    sudo apt-get update
    sudo apt-get install ruby-full rubygems


    Windows Platform

    The promptest method to get Ruby on our Windows computer is to use Ruby Installer. It’s a single-click installer and will create the full package .The installer will also install a Ruby command line powershell application that will let us use the Ruby libraries.

    Mac Platform

    Ruby is pre-installed on Mac.

    Check Ruby Version to verify installation

    ruby –version

    Steps to follow:-

    Open your Terminal or Command Prompt. On Windows, Start -> Run, then type “cmd” in Run to launch it.

    On the Mac the Terminal.app comes installed by default. It’s located in the “Utilities” folder.

    Install Sass. Ruby uses Gems to manage its various packages of code like Sass. Open terminal or command prompt window and type:

             For Linux/Mac, you will need to use the sudo command to install the Sass gem. It would look     like:

    Installation on Linux/Mac
    Installation on windows
    Install sass on ubuntu
    Installation on Linux/Mac


    This will install Sass and any of its dependencies.After successful installation we can cross-check it:


    Verify Sass
    Verify installation of Sass
    It should return Sass 3.4.6 (Selective Steve).

    If you face the following error while installing Sass,

    error-image

    It means, your HOMEDRIVE is set to P.Execute the following command in command prompt or power-shell to set it to C or where you have installed ruby.


     SET HOMEDRIVE=C:

    You can check the HOMEDRIVE by running SET HOMEDRIVE

    In next post, we are going to discuss about how to write styles using Sass.

    ufthelp

    Leave a Reply

    Your email address will not be published. Required fields are marked *