Introduction to Sass

Today, I will be discussing the CSS pre-processing tool, Sass. Sass stands for Syntactically Awesome Style Sheets. Sass is an extension language for CSS. Sass files are compiled into CSS to be interpreted by the browser. With Sass, many of the issues of repetition and maintenance inherent in CSS are resolved. In this blog, I will go over some of the features of sass that I found the most useful.

Compiling SCSS into CSS

Sass can be written by first creating a file with the .scss extension. Sass cannot be directly interpreted by the browser. Each sass file must be complied into CSS and referenced in the HTML file. The scss file is converted to css as follows:

sass main.scss main.css

The scss file is listed first as the input and the location where the compiled CSS is listed second. To allow for automatic compiling, you can add a watch flag that tells sass to watch the source file for changes and recompile to CSS when changes occur.

sass --watch .

The command above tells sass to watch for changes and recompile for all files. A single input sass file could be specified for the input and the output file for the input file could be specified as the second argument.

Nested Selectors

The most useful aspect of Sass that I found was nesting selectors. Nesting selectors is the placing of selectors inside the scope of another selector. For example, the following SCSS file nests a child selector inside of a parent selector.

.parent {
   color: blue;
   .child {
      font-size: 12px;
   }
}

This SCSS file compiles to the following CSS file

.parent {
   color: blue
}
.parent .child {
   font-size: 12px;
}

Common CSS properties can also be nested by appending a colon suffix after the name of the property. For example, the following SCSS code:

.parent {
   font: {
      family: Roboto, sans-serif;
      size: 12px;
      decoration: none;
   }
}

complies into the following CSS code:

.parent {
   font-family: Roboto, sans-serif;
   font-size: 12px;
   font-decoration: none;
}

This allows sass to be written in a form that mirrors the structure of the HTML page. This has been very helpful in organizing the styling as pages become more complex.

Variables

Sass allows you to assign an identifier to a specific value. This allows you to use the identifier multiple times in various selectors. When the value is tweaked, the value is changed in one place. For example,

$translucent-white: rgba(255, 255, 255, 0.3);

Variables can be different data types. The variables in SCSS can be assigned numbers, strings, booleans, and null. In addition, variables in SCSS can be assigned space separated or comma separated lists and maps which is a list of key-value pairs.

Mixins

Mixins allow you to make groups of CSS declarations that can be reused throughout the website. For example, the following mixin can be declared.

@mixin backface-visibility {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
}

The mixin can be passed into a CSS selector

.notecard {
   .front, .back {
      width: 100%;
      height: 100%;
      position: absolute;
      @include backface-visibility;
   }
}

Mixins can also be passed in an argument. Mixins should only be used if an argument is passed into the mixin. A default value can be assigned to the argument. Mixins can be given multiple arguments. Each argument is then explicitly defined in the @include statement. When values are explicitly defined, you can send them out of order. If a mixin definition has a combination of arguments with and without a default value, you should define the ones with no default value first. Mixins can be nested.

@mixin dashed-border($width, $color: #FFF) {
   border: {
      color: $color;
      width: $width;
      style: dashed;
   }
}
span {
   @include dashed-border(3px);
}
p {
   @include dashed-border(3px, green);
}
div {
   @include dashed-border(color: purple, width: 5px);
}

Multiple arguments can be passed into the mixin in a list or map format. The parameter can also be used for string interpolation. String interpolation is the process of placing a variable string in the middle of two other strings. String interpolation becomes handy when you want to use variables in selectors or file names.

@mixin photo-content($file) {
   content: url(#{$file}.jpg);
   object-fit: cover;
}
.photo {
   @include photo-content('titanosaur');
   width: 60%;
   margin: 0px auto;
}

The & selector is used to specify exactly where a parent selector should be inserted. The & selector allows pseudo classes to be written in a much less repetitive way. The & selector can be used with mixins. For example, the following SCSS:

@mixin text-hover($color) {
   &:hover{
      color: $color;
   }
}
.word {
   display: block;
   text-align: center;
   position: relative;
   top: 40%;
   @include text-hover(red);
}

Compiles to the following CSS:

.word {
   display: block;
   text-align: center;
   position: relative;
   top: 40%;
}
.word:hover {
   color: red;
}

The mixin inherits the parent selector where the mixin was included in the selector.