A Series of Lessons on SASS (SCSS) phpStorm. Lesson 1 - Install 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.
- 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
sudo apt-get update sudo apt-get install ruby-full
sudo gem install sass
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: