What is Sass
Sass is a stylesheet language that compiles into CSS. It adds features that do not exist in the CSS language yet such as variables, mixins, and iteration. Sass has two syntaxes.
Installing Sass
Our first step for brand new users will be to get Sass installed. Open up the command line, and run:
gem install sass
If that fails, try running:
sudo gem install sass
Success? Check the version:
sass -v
Still having trouble? Look here.
Compiling Sass
Now that we’ve got Sass installed, we’ll need to look at how we want to compile our Sass code into CSS.
Sass can be compiled via the command line, or with a desktop application like Codekit, Prepros, or Scout.
There are also a number of task runners that will compile your Sass for you like Gulp, Grunt, or Broccoli.
For the remainder of this post, we’ll be using Gulp to compile our Sass (and do other CSS related things that will make our lives easier).
In fact, we are going to use Gulp to:
- Start our local server
- Watch for changes to our Sass files
- Check for errors
- Compile our Sass
- Add CSS3 vendor prefixes
- Add minification
- Write our CSS file
- Reload the browser
Installing Gulp.js
First, make sure that Node is installed:
node -v
If you need to install Node, you can do that here.
Now, install Gulp.js:
npm install -g gulp
If that fails, try using sudo:
sudo npm install -g gulp
Next, we are ready to set up a new project.
Download the template
First, download the starter template. This template contains:
- package.json - a list of npm packages that we will install
- gulpfile.js - a list of tasks that we want Gulp to run for us
- application.scss - our Sass file
- index.html - our hello world web page
Now we just need to install all of the npm packages listed in our package.json
file.
In the command line, navigate to the root of the starter template, and run:
npm install
That should have created a node_modules
folder with all of the npm packages listed in the package.json
file.
We’ve just installed:
- browser-sync - our local server and live reload
- gulp - the task runner
- gulp-autoprefixer - adds CSS3 vendor prefixes
- gulp-minify-css - minifies CSS, using clean-css
- gulp-notify - provides error messages
- gulp-plumber - prevents pipe breaking caused by errors from gulp plugins
- gulp-rename - adds .min to file name
- gulp-sass - compiles our sass
Now we just need to run:
gulp
This will run our default
task. This task starts up our server local server, opens the browser, and begins watching our Sass file for any changes.
When there is a change in our Sass file, the styles
task will:
- check our Sass for errors
- compile our Sass
- add the needed vendor prefixes
- minify our code.
Finally, the reload task will reload our browser.
For a look at exactly how this is set up, check out the project’s gulpfile.js
.
Breaking down the gulpfile.js
is outside of the scope of this post, but if you’d like a good tutorial, check out Todd Gandee’s post - Journey into Gulp.
Some additional Gulp tasks
A few other Gulp tasks that you might consider adding into your build process are:
- gulp-hologram - a living style guide
- gulp-sass-lint - jshint style linting for Sass
- gulp-phantomcss - CSS regression testing
Project organization with partials
We’ve got a pretty good build process set up, but instead of having one giant Sass file, lets look at how we can better organize our code using Sass partials.
When Sass compiles, it will create a matching CSS file for any file with a .scss
or .sass
extension. However, if we prefix our file names with an underscore, Sass will not create a matching CSS file.
So, application.scss
will get a matching application.css
file, but _my-partial-file.scss
will not.
We can use this technique to create an organizational structure for our project. We’ll break our styles up into partial files, and then use @import
to bring all of the partial files into the main application.scss
file.
// in the application.scss file
@import 'my-partial-file-one';
@import 'my-partial-file-two';
// etc
css-burrito
So, what should our structure look like?
I have written an open source Sass Template called css-burrito that will provide a very scalable Sass structure. In addition, it will automate a few tasks for us like adding and removing partial files.
The template contains three directories and an application.scss
file to @import
all of the partial files.
libs/
_library-variable-overrides.scss
_normalize.scss
global/
_settings.scss
_utilities.scss
_base.scss
_layout.scss
_skin.scss
_typography.scss
modules/
_modules.scss
application.scss
libs
The libs directory will house all third party library code. Add libraries like Bootstrap, or Foundation, or Bourbon here. By default, this folder contains:
_library-variable-overrides.scss
- override any third party library variables in this file._normalize.scss
- Normalize v3.0.2
global
The global directory is where we will keep all of the utility code that will be used across the entire project. It should be organized as follows:
_settings.scss
- global variables and maps_utilities.scss
- global placeholders, extends, mixins, functions, and utility classes_base.scss
- global defaults for base level tags like<body>
or<p>
_layout.scss
- global layout styles like margin, padding, or floats_skin.scss
- global skin styles like gradients, colors, and box-shadows_typography.scss
- global typography classes
modules
The modules directory will ultimately contain the majority of the code in your project. You’ll add new modules as needed based on the design. This directory also contains a _modules.scss
file, to @import
all of the other modules into the application.scss
file.
css-burrito comes with superpowers!
If you want css-burrito to create files and @import
them for you, you’ll need to install it as a global npm package
npm install -g css-burrito
Once installed, you can quickly add a new instance of the css-burrito template by navigating to the root of the project and running:
burrito -n [folder-name] [file-name] [path-to-sass-directory]
This will create a new instance of the css-burrito template, and a css-burrito-config.json
file.
Once the config has been created, you can update the modules directory in a number of ways.
Add new module partials to the modules directory:
burrito -m (file-name[s])
Remove module partials from the modules directory:
burrito -r (file-name[s])
And list the partials in the modules directory:
burrito -l
css-burrito customization
If you want to rename any of the files, partials, or edit the structure of the template itself, you can make edits to the css-burrito-config.json
file. Once the config edits are in place you can generate a customized version of the template by running:
burrito -g
Let’s put this all together!
Ok, so now we have an awesome build process set up with Gulp, and we know how we want to organize our files.
Go ahead and download the starter-template-with-css-burrito.
The gulpfile.js
has been updated to watch our new project.
Sassy Patterns
Now that we’re ready, we can finally begin to write some code!
Lets take a look at some useful patterns.
Sass maps
I use Sass maps in all of my projects for two reasons. First, it limits the number of global variable names in the project, and second, they can be iterated over with an @each
loop.
To get something out of a map, you’ll use the built in map-get()
function. This takes two arguments, the name of the map, and the key that you want to get out.
Play with this gist on SassMeister.
Custom functions
I am not a big fan of typing map-get()
everytime I want to get something out of a map. Instead, I like to create a function for each map to get things out for me.
Lets create our own custom function to use with the $colors
map. This new function uses the built in Sass function map-has-key()
, which takes in a map and a key, and returns true or false depending on if the key exists.
When we call the colors function, we pass in a key, in this case, the color that we want to get out. If the key exists, our function will run a map-get()
for us, otherwise, we log a warning and exit out of the function.
Play with this gist on SassMeister.
@each loops
Finally, we can iterate over maps using an @each
loop. Here, we are looping through the colors map, getting the $color-name
and $color-hex
, and creating a ruleset with that data. We need to use interpolation to add the $color-name
.
Play with this gist on SassMeister.
Animation
Underline Animation
Curly Brace Animation
Sassy resources
Alright! We’ve learned how to install and compile our Sass, set up a Gulp task to process our styles, create a file structure, and have seen a number of useful patterns. We are now cruising along smoothly at 60mph.
However, it turns out that on this highway, there is no speed limit!
There are tons of really useful @mixins and @functions out there, and lots of people doing amazing things with Sass.
Sass is a powerful language, so it is also very easy to crash and burn.
I recommend using tools like Sassmeister to keep an eye on the CSS that you are outputting.
In addition, take a look at the following Sass Guidelines to make sure that you are writing sane, maintainable, and scalable Sass code.