Sass Projects for Beginners

Tutorial Quick-Links

1. Sass: A Brief Overview
2. How Setup Sass
3. Variables
4. Extends and Mixins
5. Organising Project Files
6. Helpful Links

---

1.) Sass: A Brief Overview

Before we get started let me give you a brief overview of Sass projects and why they’re better than CSS-only projects.

Sass is actually written in a type of language called SCSS. There are others, like Less and Stylus. However Sass is the most powerful and has the biggest following in the web design community.

To put it simply Sass is a CSS preprocessor. What’s that? Well it’s a tool that helps front-end web developers create better, more organised and more object-oriented CSS than is currently possible.

If you’re familiar with back-end languages like PHP or Ruby then you’ll also be familiar with things like loops and variables. Sass basically brings that into normal CSS.

Browsers don’t understand Sass, so to get around that you output your Sass as CSS. Sass is written in a way that can be compiled (or converted if you like) into normal CSS.

In the following sections I’ll be giving you a complete guide on Sass for beginners.

---

2.) How Setup Sass

Create a new folder where your project files will be stored. Next create a folder called assets. Inside assets create two more folders called css and scss.

Now don’t run away when you read this, because it’s very simple, but open up the command line tool. All you need to do is type cd, a space, then copy and paste the project directory from the assets folder. Here’s an example on Windows:

cd C:\Users\Seb\Documents\Sass-Project\assets

Now create a file called main.scss inside the scss folder.

Next you need to tell Sass to watch your project, we can do this with:

sass --watch scss:css

All that code does is tell Sass to watch anything in the scss folder we setup, and if it sees any changes, to export them into the css folder. So basically, our main.scss file becomes main.css

---

3.) Variables

Before we actually write the variables we need to understand some best practices for variable naming.

Name By Function

Don’t ever name your variables by the value they hold. Instead name them by the function they do, for example:

// Bad Variables
$grey: #ccc;
$orange: #f4a04e;

// Good Variables
$separator-color: #ccc;
$brand-main-color: #f4a04e;

Consistent Indentation

When you have a set of variables it’s always best to indent them by group.

// Bad Indentation
$short-var: #474747;
$a-much-longer-var: #262626;

$another-var: #353535;
$another-much-longer-var: #787878;

// Good Indentation
$short-var: #474747;
$a-much-longer-var: #262626;

$another-var: #353535;
$another-much-longer-var: #787878;

There’s a great post called Choosing great variable names (in Sass) which will also help.

---

4.) Extends and Mixins

This can be very confusing for someone new to Sass. So basically an Extend and a Mixin are close to the same thing, EXCEPT Mixins can have variables passed to them and Extends can’t.

You might also like: I’ve put together a handy post that lists 8 useful extends and mixins for Sass for use in your next (or current) projects!

An Extend

An extend is simply a pre-written piece of code that stops you having to write the same tedious lines of repetitive code over and over again.

You can write an Extend like this:

%remove-text {
	overflow:hidden;
	text-indent:-9999px;
}

.site-logo {
	width:200px;
	height:150px;
	%remove-text;
}

The output would be this:

.site-logo {
	overflow: hidden;
	text-indent: -9999px;
}

.site-logo {
	width: 200px;
	height: 150px;
}

At first you may be wondering why they show up separately, well it makes more sense when you use that extend on loads of classes and they all compile together.

Input:

.site-logo,
.random-class,
.another-random-class {
	@extend %remove-text;
}

Output:

.site-logo,
.random-class,
.another-random-class {
	overflow: hidden;
	text-indent: -9999px;
}

.site-logo {
	width: 200px;
	height: 150px;
}

A Mixin

Mixins are a little more complicated since they can be passed variables which can then determine the output.

Here’s how to write a basic mixin:

@mixin simple-mixin() {
	color:#262626;
}

.some-text {
	font-size:22px;
	@include simple-mixin();
}

Output:

.some-text {
	font-size: 22px;
	color: #262626;
}

Now let’s use a variable to make it dynamic:

@mixin dynamic-mixin($passed-var) {
	color:$passed-var;
}

.some-more-text {
	font-size:22px;
	@include dynamic-mixin(#262626);
}

Output:

.some-more-text {
	font-size: 22px;
	color: #262626;
}

They’re pretty much the same, but the difference is the ‘dynamic’ one is re-usable. So instead of having two separate Mixins we just change the color when calling the Mixin itself.

---

5.) Organising Project Files

One of the best things about Sass is being able to structure your project however you like. I’m a big fan of having all my variables in one file, mixins in another and extends somewhere else.

This is how a simple project structure may look:

- CSS
- SCSS
- main.scss
---- Base
-------- _variables.scss
-------- _mixins.scss
-------- _extends.scss
---- Components
-------- _buttons.scss
-------- _forms.scss
-------- _social-icons.scss
---- Modules
-------- _nav.scss
-------- _tabs.scss
-------- _tables.scss

Did you notice the _file-name.scss compared with file-name.scss? The underscore makes that file a partial file, which can then be imported. Example below.

In the main.scss file I include all the files and separate them like so:

// Base
@import
	'base/variables'
	'base/mixins'
	'base/extends';

// Components
@import
	'components/buttons'
	'components/forms'
	'components/social-icons';

// Modules
@import
	'modules/nav'
	'modules/tabs'
	'modules/tables';

In the end all of our Sass partial files will be imported into main.scss a which then becomes main.css. So we turn ten different files into one.

---

Conclusion and Further Reading

SCSS in general is one of the most powerful tools front-end developers can have in their arsenal and when you incorporate Sass as your preprocessor of choice then your workflow will increase dramatically.

Check out these great sites and tutorials to learn more about Sass and how to get the most from it:

• The Sass Way – A tutorial site focused completely on Sass.
• The Absolute Beginner’s Guide to Sass – Shows some of the same concepts as this tutorial but in a different way.
• CSS Wizardry – Home to Harry Roberts. Probably one of the best front-end architects around.
• Sass Style Guide – A comprehensive overview by Chris Coyier.
• Handy Sass Mixins – Some great snippets you can grab and use on any project.