Sass is a way to extend the functionality of css by adding the ability to use variables, nested rules, mixins and inline imports. You can also organize your style sheets in a better way and manage them easier.
With Sass you have a simple command you run that will view the contents of a css file (with scss extension example.scss). It will then do the necessary changes according to variables and mixins that you have and then you get a final css output of that file. So Sass compiles all the scss content and gets you a final css file that your website will be linked to.
Open your terminal and type the following command to install sass on your computer.
$ gem install sass
Understand that all Sass is css with some logic. Now with Sass you can write functions in your css and pass parameters if you project needs to. Sass files are as simple as renaming all your .css extension to .scss or .sass. For our examples we will be using .scss extension. Also think of Sass as a tool you use to compile your css. You will not be using the Sass files in your final project that is on the web. Your final project will be referencing the compiled final output after Sass is done compiling your files. That file will be the final output that your link your site too and that would simply be a .css file.
The command we will be using is sass --watch somefile.scss:outputfile.css. This will tell sass to watch a certain file for changes as they happen and compile it again to the final output file after the :.
Currently you have a file called grid.css. Let's rename this file to the following: _grid.scss. Also rename going to rename normalize.css to normalize.scss. This is setting up the files for sass to be able to read it as a partial that you can import into your master file. Let's create a file named site.scss. Open the file and add the following lines to it.
@import 'normalize';
@import 'grid';@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
After that is done you would simply run the command sass style.scss:style.css.
Extends is a way of extending certain css properties that another class may need. Instead of rewriting those properties and values again, you can just extend the class that already has that behavior.
.some-class {
border: 1px #f00;
background-color: #fdd;
}
.another-class {
@extend .some-class;
border-width: 3px;
}Understand that the above code after sass is run will render down to the following:
.some-class, .another-class {
border: 1px #f00;
background-color: #fdd;
}
.another-class {
border-width: 3px;
}So you don't repeat yourself you can nest selectors inside selectors.
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
Think of mixins like functions. They return whatever is inside of the mixin block and some mixins you can have parameters.
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
You would include it like so: @include large-text;
or you can pass arguments like a function
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }