Easy way to Compile SASS/SCSS on Magento 1.9.x theme

I thought I can give an easy step of instructions to set up a SASS setup on Windows 7 or Windows 10 PCs. I installed it and it is working fine. The default Magento 1.9.x theme comes with a SASS implemented theme.

SASS is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and many features. SASS generates a well-formatted CSS easily by compilation and makes your stylesheets easy to manage, organize, and maintain.

If you want to see all the features of the default theme of Magento 1.9 version I would recommend you to install the Magento Sample Data first, so that you can get a maximized idea.

Magento 1.9 CE version comes with ‘rwd’ theme. Well then, let’s go ahead and see how to use SCSS or SAAS on Magento.

Step1: Install Ruby

First, please go to http://rubyinstaller.org/  and download the latest Windows version and install it. While installing make sure you add Ruby to your Windows PATH by ticking the option Add Ruby executables to your PATH.

Once the installation was over, please launch the Command Prompt and type ‘ruby -v ‘ to find out whether ruby is installed or not. For example:

C:>ruby -v

Step2: Install Compass

Secondly, we have to install one of the Ruby Gems Compass. It uses the SASS stylesheet language to create stylesheets in an easy way.

Compass is a SASS-based Stylesheet Framework that streamlines the creation and maintenance of CSS. To install Compass please run the command ‘gem install compass‘ in the command prompt.

C:\>ruby -v
ruby 2.0.0p481 [i386-mingw32]
C:\>gem install compass

If you are getting an SSL certificate verification error, please use the following script instead of the above.

C:>ruby -v
ruby 2.0.0p481 [i386-mingw32]
C:\>gem sources -a http://rubygems.org/
C:\>gem install compass

Step3: SAAS Configuration on Magento 1.9.x

Once the Compass is installed, we have to set up a watcher for the Compass framework. If any changes made to .scss files, it will apply them to the CSS files when we regenerate them. For this, we have to create a file config.rb in the Magento root folder. For instance, in a folder C:\wamp\www\magento19|. Please check to find yours.

config.rb

http_path = "/"
css_dir = "skin/frontend/rwd/default/css"
sass_dir = "skin/frontend/rwd/default/scss"
images_dir = "skin/frontend/rwd/default/images"
javascripts_dir = "skin/frontend/rwd/default/js"
fonts_dir = "skin/frontend/rwd/default/fonts"

output_style = :expanded # :expanded or :nested or :compact or :compressed
environment = :development

line_comments = false
cache = true
color_output = false # required for mixture

Sass::Script::Number.precision = 7 # chrome needs a precision of 7 to round properly

Here ‘rwd’ refers to the default theme name which comes with the Magento 1.9.x installation.

Step4: Generate CSS

We usually make changes directly to the CSS files located on the “skin/frontend/rwd/default/css”. But in this case, we have to make changes in the CSS files, we need to make changes on the .scss files located on the “skin/frontend/rwd/default/scss”. Once changes made on the .scss file(s), we need to generate CSS files. To accomplish it, we need to navigate to the root folder of the Magento installation (C:\wamp\www\magento19\) first then in the command prompt, go to the Magento root directory as below shown.

C:\wamp\www\magento19>

Then we have to run the command either “compass compile –output-style compressed –force” or “compass compile –output-style expanded –force” on the command prompt to get the compressed/production version or expanded/development version of CSSs respectively.

C:\wamp\www\magento19>compass compile --output-style compressed --force

(OR)

C:\wamp\www\magento19>compass compile --output-style expanded --force

Once we finished running any one of these commands above, we will be having new CSS files generated under “skin/frontend/rwd/default/css”.

Thats it, happy coding!

Cheers!