• Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

How to Configure SASS for HTML Projects

SASS Vs Compass

SASS is booming the world with giving super powers to CSS and if you don't know about it, you must gain your knowledge as a front end developer. The configuration for SASS is so simple but I observed that people avoids it or leave it to core developers. As I opine, when we can do more in less time, we should definitely go for it!

Previously I have written on "Creating Color Palette with SASS" and it may changes the way you think about branding. This article will cover - "How to Configure SASS for HTML Projects".

Well! There are two scenarios while you pick SASS as a CSS pre-processor.

  1. PSD to HTML/CSS markup development
  2. HTML/CSS to CMS (i.e.: WordPress,...) Theme Integration

Matter of Opinions

This is general approach that UI developers used to write CSS while working on PSD to HTML/CSS and rework on SASS at the time of CMS theme integration. Because CMS has number of easy ways to deal with SASS without wasting much time on configuration.

Likewise if your project needs WordPress then you might choose WP-SCSS plugin where you have to pass directory path for CSS and SASS/SCSS folders and you are good to go! Easy right?

On the other hand if we talk about Liferay, then it has built-in support for SASS. You just have to @import "compass" in your CSS file and you are done. No extra configuration needed.

So comparatively,  configuring SASS with CMS is easy rather than efforts in HTML & CSS projects. Although you should learn to configure SASS for HTML projects. Below I tried to cover up all steps required.

SASS Configuration

  1. Overall Project Architecture

    You can keep .css and .scss files in one folder but considering best practices approach, we should have separate folders for each.

    Project Directory
    |_ css
       |_ main.css 
    |_ img
    |_ js
    |_ sass
       |_ main.scss
    |_ index.html
  2. RUBY Installer

    Very first thing is, you need to download and install Ruby 1.9.3 from below URL. And please read "WHICH VERSION TO DOWNLOAD?", so you will be cleared on selecting 1.9.3 version and not the latest one.

    http://rubyinstaller.org/downloads/
  3. Open Command Prompt

    There are two ways you can follow this step.

    1. Open command prompt (Ctrl+r and type cmd) and and go to project directory by changing directory path with CD command OR
    2. You can directly go to Project Directory in explorer and type "cmd" and hit enter. This will open command prompt for current directory
      SASS Command Propmpt
      SASS Command Prompt
  4. Installing SASS

    In command prompt run command: gem install sass . This will enable SASS for current project directory.

    SASS Install
    SASS Install
  5. Watching Input and Output Directories

    There is simple command, watches input and output files or directories for changes: sass --watch sass:css . For our project we have followed separate folders for SCSS and CSS files. That's it! Now whenever you changes anything in .scss file under sass folder, watch command will compile and update .css files accordingly under css folder.

    SASS Watch
    SASS Watch

Now we are completely done with SASS configuration for HTML project. But wait there are little more...


I am assuming that you have included main.css file to index.html  page. So skipping that basic stuffs and directly come to important point.

SASS Inspector
SASS Inspector

I am opening index.html page in Chrome browser and opened developer tool. In developer tool following "Sources" tab to view current project's architecture. Now as you can notice in screenshot that we have two folders css and scss, visible publicly. And actually we don't need that scss folder be visible to users for security concerns.

So to hide SASS folder from the architecture, now we need compass be configured for our HTML project. And though we are done with SASS configuration, next we'll move to configure compass in our project.

I am personally big fan of the Compass as it also helps with compression which enhance overall performance of the site. Below are few points on the same...

Compass Configuration

  1. Update Ruby

    Run command in command prompt: gem update --system

  2. Install Compass

    Run command for current project directory: gem install compass

  3. Enable Compression

    Run command for current project: compass compile -e production --force

  4. Watching Files for a Change

    SASS Inspector Compass
    SASS Inspector Compass

    Now we have to tell Compass to start watching our projects' css and sass directories for a change: compass watch

    Just to update that, by default Compass will generate new folders named stlesheets and sass while you create a new project using compass create <myproject>  or start watching current directory using compass watch command. So, here for our project the css folder will be replaced with stylesheets folder.

Conclusion

So, I would recommend to front end developers to start using Compass and SASS for HTML projects instead of doing it so at the time of theme integration with any CMS. This way you do not need to write same code again for SASS and save time and efforts for the next project.

Resources

  1. SASS
  2. WordPress
  3. Liferay
  4. Compass