A Series of Lessons on SASS (SCSS) phpStorm. Lesson 1 - Install SASS

sass

This is the first article in the series of lessons on a great tool for layout coding – SASS. SASS is a CSS preprocessor, in other words, it's a program that performs preliminary processing of data. In layman's terms, it's a tool that generates CSS code automatically. 

In this lesson, I'm going to explain to you how to install SASS. 

Windows

  • Install Ruby, go to http://rubyinstaller.org/ and dowload the latest Ruby version. Then install it as a typical Windows program. Put all check marks when installing. 
  • The next step, install SASS (SCSS). Open the console (press Win+R and type cmd). In the command line,  insert
gem install sass

Wait till the installation is finished. To check is everything has been installed correctly, type sass -v in the command line. If everything is fine, you'll see SASS version. Also, you can install COMPASS (we'll definitely write an article on SASS and COMPASS=) ), type gem install compass in the command line. Here you are, SASS has been installed.Insert  

Ubuntu

  • Open the command line:

            sudo apt-get update
            sudo apt-get install ruby-full
        
  • Install SASS

            sudo gem install sass
        
  • Install COMPASS

            sudo gem install compass
        

Now open phpStorm and create a scss file, e.g. style.scss, in your project. Then, you'll get a message 'File Watchers', please click on it. That's it, SCSS has been installed and connected. 

Please note that by default, CSS code is compiled in the same folder where your scss file is saved. To separate your css and scss files into different folders, go to phpStorm settings ("File->Settings->File Watchers") and make some changes. In Argument field you write:

   --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

where $FileParentDir$/css/ is a path to css folder. Also, write in the 'Output paths to refresh' field the following:

 $FileParentDir$/css/$FileNameWithoutExtension$.css

Example

Let’s fill the brief, shall we?