Hello There, Guest!
View New Posts  |  View Today's Posts
[Info] An introduction to Sass

  • 0 Vote(s) - 0 Average

12-29-2014, 05:44 PM #1
TLF Coders
Posts: 420 Threads:58 Joined: Aug 2012 Reputation: 6

An introduction to Sass
An introduction to Sass
By unqualified people for unqualified people

Have you ever developed websites where your stylesheet started to take on humongous proportions, the same line of text everywhere for your colors and font-stacks. These things are an absolute nightmare and for that reason I will try to give you an introduction to Sass.

Syntactically Awesome StyleSheets

Sass is an extension of CSS. It allows you to take your CSS to the next level with features such as variables, loops, mixins, nested rules and more.

Sass in conjunction with Compass has the exact same workflow as normal, when you make a change you can let it instantly compile and you can test the resulting CSS.

Overall it adds a lot of flexibility to your stylesheet and is a blast to use.

In this guide, we will be covering a few topics to get you started, so let's get sassy!
  • Setting up Sass and Compass
  • Variables
  • Nesting Hierarchy
  • Mixins

Setting up Sass and Compass
Using Sass and Compass is very easy, but you'll have to set it all up first. Compass is a tool with a decent bunch of features, but we'll just use it to setup our project and compile all of our Sass stylesheets.

It's important to note that Sass actually has two syntaxes: An indent-based one called Sass and SCSS. We will be using the SCSS syntax, it is roughly the same as CSS and for most people it's much more comfortable to use.

To get started, first you'll need Ruby. Depending on your operating system do the following:
  • OS X: You already have Ruby by default!
  • Windows: Use the easy installer on http://rubyinstaller.org/
  • Linux: Use the apt package manager, rbenv, or rvm

After you've done that, open up your command-line and run the following command:

Quote:gem install sass

In case this throws and error, try:

Quote:sudo gem install sass

Installing Compass is done in the exact same way, just replace the word "sass" with "compass" and everything should go smoothly!

Once that's done, open your command-line in the folder where you want to create your project. Use the following command to set up your project:

Quote:compass create myproject

This will create a folder called "myproject" with the default setup inside. We are mostly interested in the "sass" and "stylesheets" folder. Inside are the .scss and .css files. In your HTML you'll be including .css but all of the heavy-lifting will be done in the .scss files.

Open the command-line again but now inside your project folder and type the following command:

Quote:compass watch

Compass will now be looking for updates in the SCSS and instantly compile it to CSS when you make a change. This is where the setup ends and the fun begins!

Imagine you're creating your site. You've probably created a color palette for a lot of things such as your background, links, blocks and everything in between. In normal CSS you'll have to type the same color values all throughout your stylesheet, when using SASS you can store it in a variable and use that instead. Change one line in your .scss file and everything changes in the compiled .css.

All variables are defined with the "$" symbol just like in PHP. It's rather simple to use variables, simply write this:

$primary-color: #FF0000;

Once you've done that you can do something like this:

   color: $primary-color;

And this will result in

   color: #FF0000;

Feel free to go ham on this as it's one of the most neat features of using Sass.

Nesting Hierarchy

Imagine you have the following HTML-code:

<div id="wrapper">
    <div id="thing">This is a thing</div>
    <div id="anotherthing">This is another thing</div>
    <div id="yetanotherthing">This is yet another thing</div>

If we want to color the backgrounds of all these things we could do something like this in regular CSS:

#wrapper #thing{ background-color: red; }
#wrapper #anotherthing{ background-color: blue; }
#wrapper #yetanotherthing { background-color: green; }

Aside from the fact that the example is a bit bogus (we would ever do something like that?) it's a neat way to point out another of Sass's features: Nesting.

You can structure your CSS the same way as your HTML to have a much cleaner code, like this:

         background-color: red;

         background-color: blue;

         background-color: green;

Pretty nifty eh?


Imagine you want certain parts of your website to have all the text red, bold and gigantic (please don't ...), you could of course create a class .redandbold and add that, however with a @mixin you can keep everything in your SCSS.

@mixin bigredbold {
  font: {
    size: 40px;
    weight: bold;
  color: #FF0000;

You can now use this in other parts of your CSS to import it.

For example:

    @include bigredbold;
     margin-top: 25px;
     float: right;


    font-size: 40px;
    font-weight: bold;
    color: #FF00000;
    margin-top: 25px;
    float: right;

Once you start using these you'll never stop using them.

You can even use mixins with arguments such as this one:

@mixin styledlist($style, $color: #000000){
    list-style-type: $style;
    color: $color;

@include styledlist(lower-roman, blue);

Not quite something to use a mixin for, but you get the point.

You can also allow a mixin to compile multiple arguments to a single-line, for example when setting a border style.

@mixin styledborder($padding, $styling...){
    padding: $padding;
    border: $styling;

@include styledborder(3px, 1px solid black);

"1px solid black" is then taken as the value of $border


If you made it this far you have hopefully realized that Sass is a pretty great tool and I hope to have inspired you to use it more often. I should however mention that this guide was just scraping the tip of the iceberg and if you really want to get deep with Sass, I suggest you read through their documentation.


Thank you for reading

Forum Jump:

Users browsing this thread: 1 Guest(s)