SASS foundation

Using variables is the essential feature of SASS, which is mostly impossible in CSS that is used on most modern browsers. Variables can be used in every element that you want to parametrize, such as colors, margins, paddings, and fonts.

To define variables in SASS, you just need to do it with the $ sign and add the name of your variable after it.

In SCSS:

$color_blue: blue;

Usage:

.className {
  color: $color_blue;
}

As mentioned in the previous section, variables can be used to parametrize the code. The second best known feature is to add some predefined block of code that you can invoke with some shorter version.

In SCSS, you can predefine it this way:

@mixin animateAll($time) {
  -webkit-transition: all $time ease-in-out;
  -moz-transition: all $time ease-in-out ;
  -o-transition: all $time ease-in-out;
  transition: all $time ease-in-out;
}

And then invoke with:

@include animateAll(5s)

In the SASS version:

=animateAll($time)
  -webkit-transition: all $time ease-in-out
  -moz-transition: all $time ease-in-out
  -o-transition: all $time ease-in-out
  transition: all $time ease-in-out

And invoke it with:

+animateAll(5s)

Example:

SASS:

.animatedElement
  +animateAll(5s)

Compiled CSS:

.animatedElement {
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
}

What does @extend make in SASS code? For example, you have a part of code that is repeating in all fonts:

.font-small {
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
}

And you don't want to repeat this part of code in the next selector. You will write in SASS:

.font-small-red {
  @extend .font-small;
  color: red;
}

The code it will generate will look like the following:

.font-small, .font-small-red {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
}

.font-small-red {
    color: red;
}

This SASS feature is great to build optimized code. Remember to use it in your project over mixins, which will generate more code.

In CSS, you could import CSS files into one root file with @import. For example:

@import "typography.css"
@import "grid.css"

In SASS, you can import SASS/SCSS files into one with an automatic merge option. In case you have, for example, two files that you want to include in one SASS file, you need to write the following code:

@import "typography"
@import "grid"

As you can see in the preceding code, you don't need to add an extension of the file into import as it automatically loads the SASS or SCSS file. The only thing you need to remember is to have only one file in this example named, typography.

Let's check how it will behave in real code. Imagine that we have two files, _typography.sass and _grid.sass.

File _grid.sass:

.grid-1of2
  float: left
  width: 50%

.grid-1of4
  float: left
  width: 25%

.grid-1of5
  float: left
  width: 20%

File _typography.sass:

body
  font-size: 12px

h1, h2, h3, h4, h5, h6
  font:
    family: Arial

h1
  font:
    size: 36px

h2
  font:
    size: 32px

h3
  font:
    size: 28px

h4
  font:
    size: 24px

h5
  font:
    size: 20px

h6
  font:
    size: 16px

Now let's create a style.sass file:

@import _typography
@import _grid

After compilation of style.sass, you will see a style.css file:

body {
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

.grid-1of2 {
    float: left;
    width: 50%;
}

.grid-1of4 {
    float: left;
    width: 25%;
}

.grid-1of5 {
    float: left;
    width: 2%;
}

As you can see, two files are merged into one CSS, so, additionally, we made a small optimization of code because we reduced the number of requests to the server. In case of three files, we have three requests (style.css, then typography.css, and grid.css). Now there will be only one request.

Sometimes, in nesting, you will need to use the name of the selector that you are currently describing. As a best description of the problem, you need to first describe a link:

a {
  color: #000;
}

and then:

a:hover {
  color: #f00;
}

In SCSS, you can use & to do that:

a {
  color: #000;

&:hover {
    color: #f00;
  }
}

In SASS:

a
  color: #000

  &:hover
    color: #f00

You can resolve with this element other problems like combining names:

.classname {}

.classname_inside {}

In SCSS:

.classname {
  &_inside {

  }
}

In SASS:

.classname
  &_inside

This option has been possible since SASS 3.5. It will be very helpful in creating code build in BEM methodologies.

Compass is a very useful SASS framework, especially when you are working with a big list of icons/reusable images. What you need to do is gather all the images in one folder in your project. For example, yourfolder/envelope.png and yourfloder/star.png.

Then in your SASS code:

@import "compass/utilities/sprites"
@import "yourfolder/*.png"
@include all-yourfolder-sprites

Then in your code, you can use images as an example:

.simple-class-envelope
  @extend .yourfolder-envelope

.simple-class-star
  @extend .yourfolder-star

And it will add a code to your classes:

.simple-class-envelope {
  background-image: url('spriteurl.png');
  background-position: -100px -200px;
}

Where -100px and -200px are examples of offset in your sprite.