SASS, or Syntactically Awesome Style Sheets, are a style sheet language that compile to CSS. I have mentioned languages that compile to another language before. TypeScript is an example. If you have used a system that compiles one language to another you may be able to guess why someone might want to make a new style sheet language that compiles to another.

SASS retains some amount of familiarity with CSS. This alternative syntax is more expressive; a developer can write less code to express the same design as the equivalent CSS. It also is not necessary to wait on browsers to have some feature to start using SASS; the layer of separation provided by the compiler allows SASS to have less dependencies on a browser supporting a set of features to be useful. In this first of a two part post I wanted o introduce some of the elements of SASS. Here I demonstrate variables, nesting, and replacement. In the second post I will focus on control structures and functions.

There are several GUI and command line solutions for compiling SASS. My preference is for the command line tool. The command line tool is easy enough to use both directly and to integrate into other build tools.  Installation using the Node Package Manager works on Windows, Linux, and macOS (though for me it does not work with the Windows Power Shell while it works fine in the command terminal).

npm install sass -g

If you would like to check if a system has sass installed and the version number type the following.

sass --version

Much like TypeScript, think of SASS as a super set of CSS. This is not 100% the case, but it is a good starting point for understanding. SASS styles might be distributed among several files, but when compiled the output will be in a single files.  SASS files will typically have the extension *.scss.  As an initial test I have created two files in a folder. One is named first.scss and the other is named second.scss. The following is the contents of first.sass:

@import 'second';
first {
font-family: Arial;
}

And of second.sass:

second{
font-family: Arial;
}

Since first.sass is my main file of this set to compile these files I am selecting first.sass as the input to the pre-processor. When the pre-processor encounters the @import keyword it will replace that line with the contents of the files whose name is specified there. Note that I did not need to include the extension to the file name here.  To compile these files I use the following command:

sass first.sass output.css

After running the command there is a new file named output.css.

second {
font-family: Arial;
}

first {
font-family: Arial;
}

Chances are that you are not going to want to issue a command at the command prompt every time you make a change to one of the SASS files.  To avoid this you can add the parameter –watch to the command line and allow it to continue to run. Every time you modify a SASS file the compiler will regenerate output.css.

sass --watch first.scss output.css

Variables

One of the first constructs that you will use in SASS is variables. Variables are recognizable from the $ prefix that they have. A variable can hold a Boolean, color, numeric, or string values. It is easy to undervalue variables at first; CSS already provide variables. Why are SASS variables needed? SASS variables are usable in places and ways in which CSS variables are not.  Some of the ways that variables can be used to create a style sheet will come up in some of the following sections. Let us look at a typical scenario first.

$primaryColor : #FF0000;
$secondaryColor: #FFFFD0;

body {
   color:$primaryColor;
   background-color: $secondaryColor;
}

.container > div {
   margin:1px;
   color:$secondaryColor;
   background-color: $primaryColor;
}

Variables have a scope. If a variable is declared outside of brackets it is globally accessible. If it is declared within the SASS block enveloped by brackets it is only visible to the SASS code within that block. In the following the second instance of $borderColor will cause an error from a variable not being defined. The variable of the same name declared in the first block is not within scope.

body {
   $borderColor: #0000FF;
   color:$primaryColor;
   background-color: $secondaryColor;
}

.container > div {
   margin:1px;
   color:$secondaryColor;
   background-color: $primaryColor;
   border: 1px solid $borderColor;
}

Default Values for Variables

$primaryColor: #FF0000 !default;

@use  'second' with (
   $primaryColor: #FF00FF
)

.demoView {
   width:1080px;
   height:1920px;
}

.demoView .left {
   background-color: red;
}

.demoView .middle {
   background-color: green;
}

.demoView .right {
   background-color: blue;
}

.demoView {
   width:1080px;
   height:1920px;

   .left {
      background-color: red;
   }
   .middle {
      background-color: green;
   }
   .right {
      background-color: blue;
   }
}

Parent Selector

a {
   text-decoration: none;;
   &:hover {
      color:red;
   }
}

.icon {
   &-left {
      color:red;
   }
   &-right {
      color:yellow;
   }
}

.icon {
   &-left {
      color:red;
   }
   &-right {
      color:yellow;
   }
}

String Interpolation

$index:4;
item-#{$index} {
   color:red;
}

item-4 {
color: red;
}

@for $i from 1 to 4 {
   item-#{$i} {
      animation-delay: #{$i}s;
   }
}

item-1 {
   animation-delay: 1s;
}

item-2 {
   animation-delay: 2s;
}

item-3 {
   animation-delay: 3s;
}

Placeholder Selectors and @extend

%blockElement {
   display:block;
   width:100px;
   height:100px;
}

.redBlock {
   @extend %blockElement;
   background-color: red;
}

.greenBlock {
   @extend %blockElement;
   background-color: green;
}

.greenBlock, .redBlock {
display: block;
width: 100px;
height: 100px;
}

.redBlock {
background-color: red;
}

.greenBlock {
background-color: green;
}

 

Mastering SASS

SASS and Compass