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!
Well! There are two scenarios while you pick SASS as a CSS pre-processor.
- PSD to HTML/CSS markup development
- 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.
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.
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
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.
Open Command Prompt
There are two ways you can follow this step.
- Open command prompt (Ctrl+r and type cmd) and and go to project directory by changing directory path with CD command OR
- You can directly go to Project Directory in explorer and type "cmd" and hit enter. This will open command prompt for current directory
In command prompt run command: gem install sass . This will enable SASS for current project directory.
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.
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.
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...
Run command in command prompt: gem update --system
Run command for current project directory: gem install compass
Run command for current project: compass compile -e production --force
Watching Files for a Change
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.
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.