How To Be a SASSY Designer
As a web designer, one of the day-to-day challenges is staying up-to-date with the newest tools and programs available. One of the most important for designers in the past couple of years has been the rise in popularity of CSS pre-processors. Sass, or Syntactically Awesome StyleSheets, is one example and provides many useful features that speed up writing CSS, maintaining a CSS design code base, and ultimately aids in the faster completion of projects.
So what really is SASS?
Well, it’s not complex – it’s just CSS3. Any CSS you write will work just as it would if you were not using Sass. What Sass does is it extends CSS, making it more powerful. In reality, Sass is just a bunch of .scss files that compile down to one or more .css files.
How to Get Started
In order to start writing Sass code, you’ll need to have it installed.
The best and easiest way to install Sass is to use an extension. For Visual Studio, you can use Mindscape Web Workbench, SassyStudio, or Web Essentials. I’ve found Mindscape Web Workbench to be reliable, and it comes with other nice features for Visual Studio. (You could also try out a stand-alone program like Scout, or if you’re on a Mac, you can download the Compass app.
Once the extension is installed (and enabled), Mindscape Web Workbench will also install and enable Sass (and its dependencies) for you, so you won’t need to do anything else.
Get Your Project Setup
In your CSS folder for your project/solution, you’ll first need to create some .scss files. A good practice would be to create a Main.scss file. When you save your project, this file will automatically compile and create a Main.css file for you. The Main.css file is what you will want to link to in your HTML head.
If you’re creating a mobile-first website, you might also want to create a handful of other files: _smartphone.scss, _tablet.scss, _desktop.scss, and so on. You could also separate your Sass file by features, such as _nav.scss, _typography.scss, _grid.scss, just to name a few.
Take notice the underscore before the filenames above – this tells Sass to not compile this file into its own CSS file. Instead, in our Main.scss file, we will import these modular Sass files and let them compile into the Main.css file. In your Main.scss file, write this line of code to import your grid: @import “grid”; That’s all you need to import other Sass files – it should look similar to importing CSS files without Sass. Keeping your code modular in this manner is one of the best features for creating reusable code. Ordering is important, though – just like with regular CSS, inheritance comes into play.
Writing Your First Sass Code – Variables
Now that our project is set up, let’s start writing code. If you’re working from a Photoshop mockup, you might have some colors you need to use in your website design. We can start writing Sass by setting up some variables – these are reusable declarations of code we can use across our Sass and CSS. Let’s make a variable for red:
$red: #c00;
We can now use this variable any place we might declare a background color or text color:
body { background-color: $red; }
When your Sass compiles to your CSS file, the output will look like normal CSS:
body { background-color: #c00; }
You can declare other things besides colors, as well: numbers, strings of text, font names, and responsive breakpoints – anything you want, actually! Variables are very handy for creating code snippets, too – you’ll never have to use find and replace to change your code again.
Another handy feature of Sass is changing the tint of a color on the fly. Let’s say we want to make our red color from above lighter. We can do that easily with this code:
body { background-color: lighten($red,10%); }
This Sass code will take our red color, lighten it by 10%, and automatically generate the hex code in our compiled Main.css file. You can also darken the tint of a color by replacing lighten with darken above.
Nesting
Nesting will speed up your code production by reducing the amount of code you need to write. A good example here would be styling tables, rows, and cells:
table {
background:#fff;
tr {
border-top:1px solid #000;
td {
color:$red;
}
}
}
This code will output/compile as:
table { background:#fff; }
table tr { border-top:1px solid #000; }
table tr td { color:#c00;}
Mixins
Mixins are another part of the Sass way of creating reusable and clean code. A good example would be vendor prefixes – we can create a mixin that declares vendor prefixes once so we don’t have repeat ourselves in our Sass document. A good example would be writing a mixin for the border-radius property:
@mixin border-radius($radius){
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
When we go to write our CSS for border-radius, we can include our mixin (the Sass term for using a mixin) like so:
.button {
@include border-radius(5px);
}
Our compiled CSS code will look like this:
.button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
The only gotcha here is that you need to write your code for your mixins before or above your code where you start including them. A good practice would be to keep your mixins in a _mixins.scss file, and declare an import for it at the top of your Main.scss file.
Learn More Sass
That’s just scratching the surface of what Sass can do: you can also write loops, if statements, and even complex math operations to help you write better CSS code. The power and beauty of Sass lets designers write DRY code – or Don’t Repeat Yourself code – and brings designers closer to the development realm. Be sure to try out using Sass in your next project, and read through the resources below to learn more about Sass and its syntax.
Resources
The Sass Project – http://sass-lang.com/
The Sass Way – http://thesassway.com/
Dry-ing Out Your Sass Mixins – http://alistapart.com/article/dry-ing-out-your-sass-mixins
Bootstrap Framework Written Using Sass – https://github.com/twbs/bootstrap-sass
More Sass Tools: http://mashable.com/2013/06/11/sass-compass-tools/