If you have been developing websites for quite some time, I'm sure you have noticed that some of your CSS (Cascading Style Sheets) are getting longer or more complex, which means code maintenance is also getting harder, right?
One way to DRY (Don't Repeat Yourself) in CSS coding is by using Sass (Syntactically Awesome Stylesheets).
I came across Sass because of one of my web development projects for Magento templating is using it by default.
Sass is a stylesheet scripting language that is interpreted by a preprocessor into an ordinary CSS. Some features of Sass are variables, nesting, mixins, partials with imports, control directives, expressions and more.
This article will provide you the basic instructions and examples to help you kickstart learning and using Sass in your web development projects.
You could either install it through command line or an application. First things first, you should install Ruby before installing the Sass gems.
Install Ruby first then execute this command
sudo su -c "gem install sass"
Install Ruby first using the RubyInstaller for Windows, follow the commands below to complete Sass installation.
Ruby is pre-installed in Mac, follow the commands below to complete Sass installation.
Command Line Sass Installation
- Open terminal or command prompt
- Execute this command to install Sass
sudo gem install sass
- Check if it is working. You should see Sass's version.
Sass has 2 syntaxes:
- SCSS (Sassy CSS)
- File extension is *.scss
- This is actually a CSS3 syntax extension
- Valid CSS3, means valid SCSS
- Supports CSS hacks, vendor specific syntax, old IE
- File extension is *.sass
- Uses the older indented syntax, means indentation is preferred vs. brackets
- Uses newlines, not semi-colons
- Quicker to write and easier to read
For this article we are going to use the SCSS syntax, which is the preferred/default syntax of Sass.
Your First Sass Project
Create a project folder named "sass-tutorial". Within the "sass-tutorial" folder, create 2 files:
- _varsconstants.scss (preceding a file with an underscore means Sass will ignore it and NOT compile it to a CSS file.)
Next, open and edit your _varsconstants.scss to add your variables. The variable "$weather" will be used for a Sass Mixin code example, which can be found at the bottom of this tutorial.
$primaryFont: Helvetica, sans-serif;
Next, open and edit your style.scss to this:
*Partials with Import directive
font: $percent100 $primaryFont;
color: $primaryFontColor; }
Your style.scss demonstrates how to use Partials with Import directive and Sass variables.
Next, to create a CSS file from SCSS you should open a terminal or command prompt and make sure your current directory is in "sass-tutorial" then execute this command:
sass style.scss style.css
Congratulations! You have just created your CSS file, and it should look like this:
*Partials with Import directive
font: 100% Helvetica, sans-serif;
color: #333; }
Other Usefull Sass Commands
You can also convert your SCSS files to SASS syntax:
sass-convert style.scss style.sass
and vice versa:
sass-convert style.sass style.scss
You can also watch a folder for changes so it automatically interprets your SCSS file to CSS, just use this code:
sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
Sass also has 4 styles for your CSS output, it can be nested, expanded, compact or compressed. The example below shows how to use the compressed style, which is not meant for human reading.
sass style.scss style.css --style compressed
Using a Sass GUI Appliction: Koala
If you are not comfortable in using Sass through command line, you can use several Sass GUI applications. I've tried using Koala (for Mac) which is an open-source GUI app for Sass, Less and Compass. Here is a screen capture for Koala's interface.
More Sass Examples: Mixins and
if Control Directive
These are just some of the COOL examples that I saw from Sass's documentation and found useful for some of my websites.
For more examples here is a zip file of a SCSS file and its interpreted CSS file for your reference. I hope this tutorial has helped you to understand and integrate Sass to your web projects.