During a discussion a few weeks ago with an amazing front-end developer I was blown away that they hadn’t even given CSS preprocessing a go. I was bamboozled.
Learning something new, be it Sass, Less, YUI, Grunt, etc can always be a little daunting but making the time to ‘try’ is an important part of developing for the web.
If you get overwhelmed with all these new fandangle ‘things’ people are talking about, be mindful that you don’t necessarily have to adopt them. Having a basic understanding and awareness of what they do is all you really need to know. If the ‘thing’ really fits into your development workflow, then it’s a win. Dedicating more time to really learn and adopt it should be a no brainer. If it doesn’t, then at least you have the peace of mind that you’re not doing things in a inefficient manner.
This brings me to Sass. So many amazing tools, libraries and resources have been released during the last 18 months it is truly mind boggling. But the winner for me is Sass. The amount of impact this has had on my day-to-day development has been astronomical.
What is Sass?
Sass (Syntactically Awesome Style Sheets) is built on top of CSS enabling, you to do more powerful things with your sites style sheets. Constructing your styles in Sass is just another way to writing CSS.
The Sass language is developed in a way to help you reduce repetition with your CSS and save you time.
Basically you write your Sass in the set syntax and it compiles to CSS.
Sass helps you write better CSS
Why Sass?
There are a few other competing projects that do a very similar thing to Sass. For me this post on CSS-Tricks is a must read if you are sitting on the fence. Should you use Sass? Well that depends. Do your research, talk to others and pick what is best suited to your workflow. But if you write lots of CSS you should definitely give it a look.
Setting up Sass
It’s pretty painless.
To get started download this very basic folder structure which has some prewritten Sass files. Or, if GitHub is more your thing you can clone the repository.
website/
|-- index.html
|-- css/
| |-- styles.css
|-- styles/
| |-- _normalize.scss #normalize styles
| |-- _base.scss #your Sass
| |-- styles.scss #primary Sass file
Note: the .scss
filename extensions.
In order to install Sass, you need to have Ruby installed. If you’re using a Mac, it’s already installed. Unfortunately Windows doesn’t come with Ruby and you will need to install it via RubyInstaller.
Open up the terminal and run this command to install Sass:
gem install sass
Navigate to inside the downloaded template folder and run the following command in the terminal to translate the Scss
files into one CSS
file.
sass --watch style.scss:style.css
Now whenever you change style.scss (which imports other .scss files), Sass will automatically update style.css with the changes.
To take things a little further and utilise the power of Sass, Sass allows you to choose between four different output styles by using the --style
command-line flag.
sass --watch styles/:css/ --style OPTION
The options being: nested, expanded, compact, compressed.
To have Sass minify all your CSS just use:
sass --watch styles/:css/ --style compressed
But I Hate the Terminal!
If this is the case I would suggest looking into CodeKit or LiveReload if you are based on a Mac. If you are on a Windows machine then Scout looks good.
Sass Basics
Sass makes CSS fun again
Sass is an extension of CSS3, adding nested rules, imports, variables, mixins, selector inheritance, and more.
With any language there is so much to learn but understanding the basics always comes first. Hopefully the sections below enlighten you to the power of Sass.
@import
There are few ways to use @import
within Sass files but importing various style sheets into one is how I mainly utilise it.
If you have a Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, in the download provided. The styles.scss
imports, normalize and base.
@import "normalize";
@import "base";
These are two different scss files.
- _normalize.scss
- _base.scss
Doing this is a super convenient when the project you are working on has lots of components. Separating the styles for development just makes sense.
It’s also possible to import multiple files in one @import
. For example, the styles.scss
file could be rewritten like:
@import "normalize", "base";
- More details on @import.
Sass Variables
Sass allows variables to be defined. This is wicked!
If you use the same values all over the place, why not just set up variables and easily manage them.
Variables begin with a dollar sign $
and the variable assignment is done with a colon :
.
$dark: #333333;
p {
color: $dark;
}
p {
color: #33333;
}
I generally think it’s a good idea to declare the variables at the top of a file. Doing so makes them easy to manage.
- More details on variables.
Nesting
Sass allows nested selectors and properties within each other. Used correctly they can avoid large amounts of repetition. Used incorrectly, they can introduce performance issues.
#logo {
background:{
color: red;
image: url("url");
repeat: no-repeat;
}
a {
text-decoration: none;
}
}
#logo {
background-color: red;
background-image: url("url");
background-repeat: no-repeat;
}
#logo a {
text-decoration: none;
}
One thing to remember when nesting. If you are nesting more than about 3 levels deep, maybe you are doing it wrong…
- More details on nesting.
Referencing Parent Selectors
Referencing parent selectors by using the ampersand (&
) can be a powerful tool, if used right.
#header a {
font-size: 20px;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
#header a {
font-size: 20px;
text-decoration: underline;
}
#header a:hover {
text-decoration: none;
}
Cool hey! No need to write out the #header a
again.
- More details on referencing parent selectors.
Mixins
Mixins are one of the most powerful Sass features. Mixins allow for efficient and clean code repetitions, as well as an easy way to adjust your code.
Mixins are defined using the @mixin
rule which takes a block of styles that can then be included in another selector using the @include
rule.
@mixin clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
// For IE 6/7 (trigger hasLayout)
}
#logo {
@include clearfix;
padding: 4px;
margin-top: 10px;
}
#logo {
padding: 4px;
margin-top: 10px;
}
#logo:before,
#logo:after {
content: " ";
display: table;
}
#logo:after {
clear: both;
}
#logo {
*zoom: 1;
}
If you find yourself writing some rules more then twice, then it might be worth creating a mixin.
The above is just the tip of the iceberg into what mixins can do.
- More details on mixins.
The Deal Breaker
If I had to pick one feature to ‘show off’ to someone that still wasn’t convinced then it would be a media query mixin for various screen sizes referenced directly inside a CSS element.
@mixin breakpoint($point) {
@if $point == large {
@media (max-width: 64.375em) { @content; }
}
@else if $point == medium {
@media (max-width: 50em) { @content; }
}
@else if $point == small {
@media (max-width: 37.5em) { @content; }
}
}
#header {
width: 75%;
@include breakpoint(large) { width: 60%; }
@include breakpoint(medium) { width: 80%; }
@include breakpoint(small) { width: 95%; }
}
#header {
width: 75%;
}
@media (max-width: 64.375em) {
#header {
width: 60%;
}
}
@media (max-width: 50em) {
#header {
width: 80%;
}
}
@media (max-width: 37.5em) {
#header {
width: 95%;
}
}
Rad hey!
At first I was a little sceptical about writing media queries this way. In the past I had a dedicated section in my style sheet for all the specific @media
rules. But its been well over 4 months now with this method and it just makes sense whist styling. Also the ease of maintainability is amazing.
- More details on @media.
Onwards
Sass is super powerful and has completely revitalised the way I currently approach my styling. The above covers just the basics, but hopefully will give you an insight into its capabilities. I believe Sass is not for everyone, but if you are searching for ways to improve your development workflow and are keen broaden your skill set, then it can’t hurt to investigate.
Very good article Jake. I was also very skeptical about SASS. Having a PHP background, it seems very good and natural to me.
My first reaction looking at this line $dark: #333333; was WOW.
Jake, I had the same experience as you have here. I was hesitant and first but gave it a go and for all those examples that you’ve outlined i’ve made the switch.
And once I did make that switch (which was fairly painless) I’ve never looked back.
The only thing I need to get working is dev tools to reference the .sass files somehow?
Ben, I think this might be exactly what you’re looking for: http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/
This triggered a sense of urgency to get started with SASS. I use Less in my day to day work but was keen to get started with SASS. This article has done the heavy lifting for me.
Wow… that ‘Deal Breaker’ bit is freakin’ awesome. I’ve only started playing w/ Sass recently but that mixin kicks so much ass. [copied, saved to snippet collection]
Good to hear Daniel!
If you are new to Sass and are looking for a simple to follow introduction to Sass with editable examples, please checkout this Slide Deck I put together. If you pull down the PDF, there are links in the slides to a tutorial example and editable SassMeister code examples.
https://speakerdeck.com/anotheruiguy/sass-101-a-newbs-guide
Thanks for this great article. Sass looks great 🙂 My only concern is sass –watch command. Would sass –watch have a great impact on system resources (CPU/Memory), especially if it should watch a folder that has say 20 sub-folders, with a total of 200 SCSS files to watch? Thanks,
To be honest the only time I have ever experienced any kind on slowness is using Ruby Sass within a Grunt build file. In that case I just switched to using LibSass and everything was speedy as.
I can’t say I have had over 200 sass files but I’m sure it would be less painful then having one mega CSS file (or a few mega CSS files).
Also I’m pretty confident that once you switch over to Sass you would be able to refactor a lot of your styles.
All the best.
Cheers,
Jake
Thank Jake .. I have started to use SASS and it is really amazing. I heard about it before but did not take the concept seriously. As for my previous question, I have in the meantime implemented a shell script that I can run in any root folder that contains a website project in my system, it would take care of the sass –watch folders. I need to run this only when I will be updating scss files, after converting to css, I can simply stop the watching so the issue of how many files to watch would not matter much, Thanks for the article again, now I use SASS, I should have done it earlier.
I know this is an older article, but I’ve been using Koala (http://koala-app.com/) for sometime now (3yrs?). FWIW, it is a GUI that supports Less,Sass, CSS (Autoprefix, minify & compress), CoffeeScript, Javascript (minify/compress) and Compass Framework (and has built in compilers). No need to install ruby on windows either. Also allows you to use custom Ruby (if installed) and system/custom compilers (if installed).