SASS

A quick how-to.

Nothing in depth.

Sections

Sass

Input has a pink background.

CSS

Output has black background.

Installation

Let's go. I use homebrew as my package manager. So I installed Sass with: brew install sass/sass/sass.

Double check the installation with: sass -v.

Using Sass

Now we need to create our Sass file. In our directory we'll touch style.scss.

Then we need to tell Sass where to put the CSS.

sass --watch style.scss:styles.css

You'll ge a message that'll tell you Sass is watching for changes. Press Ctrl-C to stop...

Open style.scss in your text editor, we'll start with just changing some colors.

In our style.scss file we'll create some variables.

$cowboyBlue: #003594;
$dodgerBlue: #005A9C;

To use them, in the same file.

h1 { color:$cowboyBlue; }

This is going to output plain CSS in your main CSS file:

h1{ color: #003594; }

Variables

A spot for you to put stuff you want to use again.

Do you really want to keep typing, #003594 repeatedly?

What happens if you want to change it?

Good luck finding them all.

With Sass, we can create a variable to hold that info.

Make sure that when you declare and use it, you put the $ in front.

Should you need to change all the places you use that color/variable. You now just have to change it in one place.

Rules for Naming Variables

Name them whatever the flip you want.

Just make sure that when you declare and use, you put the $ before it.

You can use hyphens and underscores. They are interchangeable.

You can declare using a hypen, then access with an underscore.

$cowboy_Blue: #003594;
$dodger-Blue: #005A9C;

Access

h1 color:$cowboy-Blue; }
p{ color:$dodger_Blue; }

Will output the in your CSS file

h1 { color:#003594; }
p{ color: #005A9C; }

Nesting

You can put a varaible in a selector.

But you're going to limit the scope, it will only e available within that level of selectors.

So, this is legal.

#testing {
$para_Text: red;
padding: 2em 3em;
}

But if you try to access that $para_Text anywhere else. You're in for some trouble.

You can get around it by defining it outside of variables or, putting !global.

#testing {
$para_Text: red !global;
padding: 2em 3em;
}

Partials

A partial Sass file that you can include in another Sass file.

Modularize your style sheets.

You save it with a leading underscore.

That lets Sass know that it is nly partial file and should not be generated into a CSS file.

It is going to be used with an @import directive in the file it's needed.

In our _codeSection scss file.

$codeSecWidth:50%;
$codePadding: 1em 2em;
$codeBackground: black;
}

Then we use it in the main scss file.

@import "codeSection" .codeSection{
width: $codeSecWidth;
padding: $codePadding;
background-color: $codeBackground;
}

It's going to output your regular CSS.

.codeSection {
width: 50%;
padding: 1em 2em;
background-color: black;
}

Mixins

A mixin is a groups of CSS declarations that we want to reuse.

So our vendor prefixes are a perfect example.

@mixin transform($property){
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}

Called here, with the @include.

.mixinExample{
@include transform(rotate(5deg));
position: relative;
top: 2em;
}

CSS output.

.mixinExample {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
position: relative;
top: 2em;
}

We're passing in our 5deg rotation with the $property variable.

Extend/Inheritance

@extend lets us share a set of CSS properties from one selector to another.

Let's just take a div for our example.

We can give it certain properties they will share.

.ourdiv {
padding: 15px;
background-color: gray;
color: white;
}

Then use @extend directive to "customize" it for each additional purpose.

.goodDiv{
@extend .alert;
background-color: green;
}
.badDiv{
@extend .alert;
background-color: red;
}

This will compile to this.

.ourdiv, .goodDiv, .badDiv {
padding: 15px;
background-color: gray;
color: white;
}
.goodDiv { background-color: green; } .badDiv { background-color: red; }

You can use multiple Extends or chain them together.

ourdiv {
padding: 15px;
background-color: gray;
color: white;
}

.coolDiv{
box-shadow: 5px 5px #888888;
}
.goodDiv{
@extend .ourdiv;
@extend .coolDiv;
background-color: green;
}

CSS file

.ourdiv, .goodDiv, .badDiv {> padding: 15px;
background-color: gray;

color: white;

} .coolDiv, .goodDiv {
box-shadow: 5px 5px #888888;
} .goodDiv {
background-color: green;
} }


Or you can chain the Extends together.


So, we're not going to have 2 extends in our .goodDiv.

We'll do this.

.ourdiv {
padding: 15px;
background-color: gray;
color: white;
} .coolDiv{
@extends .ourdiv;
box-shadow: 5px 5px #888888;
}
.mehDiv{
@extends .cooldiv;
background-color: orange;
}

Compiled CSS

.ourdiv, .goodDiv, .badDiv {
padding: 15px;
background-color: gray;
color: white;
} .coolDiv, .goodDiv {
@extends .ourdiv;
box-shadow: 5px 5px #888888;
}
.mehDiv {
@extends .cooldiv;
background-color: orange;
}

As you can see, this can be helpful.

To make it even sweeter, you can use placeholder selectors.

These won't actually be compiled to CSS, their sole purpose is to extend anothe selector.

You start with a % (percent sign).

This placeholder selector from your Sass file will be used to extend other selectors, but it won't be compiled into you final CSS.

%whoa{
font-size: 2em;
}
.placeDiv{
@extend %whoa;
@extend .coolDiv;
}

Compiled CSS

.coolDiv, .goodDiv, .placeDiv {
@extends .ourdiv;
box-shadow: 5px 5px #888888; }
.placeDiv { font-size: 2em; }

Our %whoa selector is nowhere to be found, but as you can see, it is still being used.

Operators

To help work with numbers... width, padding... Whatever you use it for. We can use operators.

Equality Operators
== Equal to
!= Not equal to

There are also number operators we can use them to perform calculations.

Number Operators
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulo

So we can use Sass to calculate width percentages.

#operatorsTab{ width: 300px/960px *100%; }

Will give us a CSS output of:

#operatorsTab { width: 31.25%; }

If you need to the operators also work on colors and Strings.

So if want to, you can add hex values together.

Oh, you can also use Boolean Operators... and, or and not.

I'll get back when I have a concrete example.

Functions

Use these when you want to reuse a part of the code.

Say you want to make a function for your padding.

So my Sass is going to look like this.

@function calcfunction($number, $number2){
@return $number + $number2
} .module { padding: calcfunction(10px, 5px); }

CSS output

.module { padding: 15px; }

Want more info or something still not clicking?

Here are my go to resources...

If after after searching for what seems like forever and you still can't find it.

Let it know...

But don't! Take a break... You'll get it.