Magento 1.9 CE
In case you didn’t know already, Magento offers a responsive theme out of the box since 1.9 CE. The dev team also incorporated the use of SASS by default on the 1.9 CE edition. I can’t repeat what SASS stands for, since it’s painfully lame, but here’s the website if you want to know more.
SASS could (almost) be described as CSS for programmers. But, once you get stuck into it, you’ll be hooked. Why don’t we setup SASS on our Windows 7 machine, then we can be syntactically awesome too (involuntary wretch).
There are several ways to setup SASS compilation, and it depends on your IDE as to which method you prefer. Sublime Text, for example, allows direct integration inside the application using additional packages. The method I’ll be describing here is IDE-independent, and we’ll be using Windows’ command prompt to monitor our SASS changes, and builds.
Ruby
First of all, we’re going to need Ruby installed on our machine. The most stable version for this is 1.9.3. If your not familiar with the Ruby language, it might be worth reading up on the basics. Ruby uses gems, which are similar to software packages, to achieve certain functionality.
Let’s install the Windows version of Ruby first, at version 1.9.3. Download the latest 1.9.3 (currently p545) from http://rubyinstaller.org/. Yes, there are versions of Ruby versions! Run the installer, and be sure you add Ruby to your Windows PATH by ticking the option Add Ruby executables to your PATH.
Once that is done, you’ll want to launch an instance of the Command Prompt. This is a good opportunity to recommend a nicer command prompt for Windows. If you use the prompt often, upgrading is a must! There are tons available, personally I use the 64-bit Console Emulator ConEmu.
From the command prompt, check that Ruby is installed and running:
1 2 | C:\>ruby -v ruby 1.9.3p545 (2014-02-24) [i386-mingw32] |
If you get the output above, we’ve got Ruby installed and it’s in our PATH; well done.
Gems
So, Ruby uses gems to do extra stuff. We’re going to use compass to monitor our SASS files and offer additional functionality to SASS itself. I won’t complicate things more than that, but you can always read up on compass here if you want the specifics.
Installing it is as easy as gem install compass:
1 2 3 | C:\>ruby -v ruby 1.9.3p545 (2014-02-24) [i386-mingw32] C:\>gem install compass |
You should see some output similar to the following image.
Now, once that’s done, we’re ready to setup our project and utilise the power of SASS.
Project Config
We need to setup a watcher for compass inside our Magento project. This will allow compass to monitor a directory, or several, for changes to the SASS files. When it detects any changes (after we save those files), it recompiles our CSS. We’ll use a config.rb file, which tells compass where to watch for our SASS files, among other things.
There are loads of options for configuring compass, and specifically what it does during compilation of your CSS. I want to keep things simple with a working example, which you can tweak later on.
In your Magento root directory (mine is at C:\Sites\magento_1.9), add a config.rb file with the following contents:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | # require additional compass plugins here # ----------------------------------------------------------------------------- # file paths # ----------------------------------------------------------------------------- http_path = "/" css_dir = "skin/frontend/mytheme/default/css" sass_dir = "skin/frontend/mytheme/default/css" images_dir = "skin/frontend/mytheme/default/images" javascripts_dir = "skin/frontend/mytheme/default/js" fonts_dir = "skin/frontend/mytheme/default/fonts" output_style = :compressed # :expanded or :nested or :compact or :compressed environment = :development line_comments = false cache = true color_output = false # required for mixture # SASS core # ----------------------------------------------------------------------------- Sass::Script::Number.precision = 7 # chrome needs a precision of 7 to round properly |
Note that I’m also using a new theme (mytheme) directory. You should modify your paths accordingly. In my Magento project, all the SASS files (ending in .scss) exist in the css directory. Compass will also spit out the compiled .css files to this directory.
Note: If you’re using version control, such as git, you can ignore the .scss files from your repo, unless you’re processing them on the remote host.
Putting It All Together
We’re ready to go. Let’s put it all together and start monitoring for changes. In the command prompt, navigate to your Magento root directory, and tell compass to watch for changes by typing compass watch.
1 2 3 4 5 6 7 | C:\>ruby -v ruby 1.9.3p545 (2014-02-24) [i386-mingw32] C:\>gem install compass ... C:\>cd Sites\magento_1.9 C:\Sites\magento_1.9>compass watch >>> Compass is polling for changes. Press Ctrl-C to Stop. |
We’re now ready to work. Compass is watching our Magento directory for any changes that occur, and it will compile and/or recompile the css files as necessary. Open your favourite IDE, and make a change to one of your theme’s .scss files. Save the file, and you will notice that compass springs into action.
1 2 3 4 5 | ... C:\Sites\magento_1.9>compass watch >>> Compass is polling for changes. Press Ctrl-C to Stop. >>> Change detected at 11:01:32 to: components/_header.scss overwrite skin/frontend/mytheme/default/css/styles.css |
And we are in business! Your styles.css file was recompiled, and we can see those changes on the site now.
SASS is extremely cool for developers and designers. As you develop a good collection of settings, mixins and placeholders, your growing SASS toolkit will save you tons of time in future development.
Have fun!