Everything I Know About Sass

Our next Eastern Panhandle Web Tech Meetup will focus on the CSS preprocessors, Sass and Less. The title of the meetup is, Team Death Match: SASS vs LESS. As a member of Team Sass, I thought I should write out everything I know about Sass so that I can defend my position and keep Team Less from pillorying me on the town square.

What is Sass? What does it do?

In a nutshell, Sass is a preprocessor that lets you use features that are not currently found in CSS. For me, in my admittedly infant stage of use and understanding, this means variables and mixins. It also includes nesting, inheritance, partials, imports, operators and other great features that I’m not currently taking advantage of. In this blog post, I’m going to show you how I use Sass and the features that I used on the redesign of this site, firebrand.media. Or, if you prefer, you can skip the article and take a look at my Sass file.

Getting Started is Easy

Here’s what you need to get started:

  • Sass installed via an application or the command line
  • Valid Sass File

Sass Installed

Installing Sass via the command line on Linux (sudo su -c “gem install sass”) or Mac (sudo gem install sass) is easy. It’s a bit more complicated on Windows but can still be done. Complete installation instructions can be found on the sass-lang.com website.

Personally, I prefer using Codekit - a $32 app from Incident57 that has a bunch of great features including compiling your Sass (or Less) files.

A Vaild Sass File

A valid .css file with the file extension changed to .scss (or .sass) is a valid Sass file. That’s it. You’ve written your first Sass file, albeit without any of the advantages of the Sass language.

Sass Features I Use

Variables allow you to store things like colors, font stacks, or any CSS value you think you’ll want to reuse.

For me, variables are the easiest feature to understand and implement. Every project has a handful of “brand” colors. These are the colors that the brand is identified by and will be used throughout the site. I love variables for colors because I can simply define them once in my Sass file and then call them later using their variable name instead of having to remember their hex or RGBA value.

Sass uses the $ symbol to make something a variable. The following is the variable for the primary color on this site.

1
2
$color-main: RGBA(38, 52, 65, 1); //BLUE
$color-alt-red: #EE4535; //RED

In my Sass file I could then use this variable as follows:

1
body { color: $color-main; }

Once processed by Sass, this would output the following css:

1
body { color: RGBA(38, 52, 65, 1); }

The beauty of this is that anytime you need to define that particular color in your stylesheet, you can simply call the variable and Sass will output it as the color you specify. It also helps when you need to make wholesale changes in a stylesheet - for example if you need to change the link color throughout your site. If you store this in a variable, you can change the color in one place and be done with it.

Responsive design breakpoints are another great use for variables. I can create the breakpoints at the top of my Sass file and then apply them as necessary throughout the stylesheet.

1
2
3
4
$width-tablet: 640px;
$width-desktop: 900px;
$width-1200: 1200px;
$width-widescreen: 1500px;

I would then call the variables wherever I need to add a breakpoint.

1
2
3
@media screen and (min-width: $width-tablet) {
	body { color: $color-alt; }
}

Once processed, the above would result in the following in my CSS file.

1
2
3
@media screen and (min-width: 640px) {
	body { color: #EE4535; }
}

Again, if I decide that I need to modify the breakpoint, I simply make the change once in my variable and it is applied throughout the stylesheet.

Mixins

Mixins help take some of the tedium out of writing your CSS. “A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes.” Instead of writing out each vendor prefix for a particular rule - like box shadow or border radius - you can define them once and then call them as needed.

In the example below, I have created a mixin for a box-shadow.

1
2
3
4
5
@mixin box-shadow {
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.75);
}

I can then call the mixin using the @import feature in the specific rule that I want to have the box shadow.

1
.box { @include box-shadow; }

You can even pass in values to make your mixin more flexible as in the border radius rule below.

1
2
3
4
5
6
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

The above mixin could be used in your Sass file as follows:

1
.box { @include border-radius(10px); }

Which would result in the following style in my CSS stylesheet:

1
2
3
4
5
6
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

As I said, I’m still learning how to make Sass work for me. I know I’ve only scratched the surface when it comes to Sass but even those few features have helped me write more maintainable code. Or, at least I think it has.

Sass Resources

If you’re looking for more info on Sass, I would recommend the following:

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins