How to Make Better Use of SASS Extensions for Custom CSS Variables

Do you often write CSS rules for pages and have to copy parts of the rules from file to file? You probably haven’t heard of the SASS extension that exists to help you solve this problem.

What is SASS?

SASS is a CSS extension that lends superpower and elegance to this formal simple style language. SASS gives you the ability to use variables, nested rules, mixins, inline imports, and more, all with fully CSS-compliant syntax.

The essence of this article is to give you an idea of how SASS works in different cases and it’s up to you to decide if you need it.

Syntax

For SASS there are two types of syntaxes: SASS & SCSS.

SASS provides a more concise way of working with CSS. It uses indents instead of braces to separate selector attachments and newlines instead of semicolons to separate properties. Syntax has the same functionality, as well as SCSS. Files that use this syntax have a .sass extension.

SCSS (Sassy CSS) used throughout this article is the advanced CSS syntax. This means that each valid CSS style sheet is a valid SCSS file with the same logic. Files that use this syntax have a .scss extension.

Files can be automatically converted from one format to another using the sass-convert command:

# Convert SCSS to SASS
$ sass-convert style.scss style.sass
# Convert Sass to SCSS
$ sass-convert style.sass style.scss

Selectors

body {
  color: #ddd;
}

body main {
  color: #fff;
}

This is how the CSS passage above can be written in SCSS:

body {
      color: #ddd;

      .main {
    color: #fff;
      }
    }

SCSS structure is more similar to the DOM structure. This helps write CSS in a more efficient way.
We can refer to the parent selector:

.main {
  color: #fff;

  &:hover {
    color: #aaa;
  }
}

It will be replaced by a parent selector and compiled in the following:

.main {
  color: #fff;
}

.main:hover {
  color: #aaa;
}  

SASS Variables & CSS Custom Properties

CSS variables

One of the greatest advantages of the native CSS Variables is that they live in your latest browser (starting with browsers 2015 years, not supported by the lovely IE 9/10 :D). They are fully accessible. You can inspect them, and, maybe most importantly, manipulate them using JavaScript.

Properties

:root {
  --font-family: Roboto;
  --text-size: 1rem;
  --font-color: #000;
}  

SCSS variables

SCSS variables start with a $ character.

$width: 30px;
$color: #fff;
body h1 {
  width: $width;
  color: $color;
}

This will be compiled in the following:

body h1 {
  width: 10px;
  color: red;
}

SCSS Variables are only available inside the nested selector level where they are declared. If you want a variable to be available outside the scope, you need to add !global property:

body {
  $width: 5rem !global;
  width: $width;
}

footer {
  width: $width;
}

SCSS & CSS Variables

:root {
  --font-family: Roboto;
  --text-size: 1rem;
  --font-color: #000;
  --width: 30px;
}

$font-size: var(--text-size);
$width: var(--width);
body {
  font-size: $font-size;
  width: $width;
}

footer {
  width: $width;
}

Insert: #{}

You can use variables in the properties of names and values using #{}.

$name: bar;
$attr: background;
main.#{$name} {
  #{$attr}-color: #fff;
}

This compiles in the following:

main.bar {
  background-color: #fff;
}

Imports

@import "foo.css”; //import foo.css
@import "foo” screen; //import foo.scss
@import "foo.scss" screen; //import foo.scss
@import "foo","bar" screen; //import foo.scss и bar scss

Attached import

If foo.scss is included as described below:

.title {
  color: #aaa;
}

Then we can import this file to another SCSS construction:

body {
  background-color: #fff;

  main {
    color: #000;

    @import "foo";
  }
}

This will compile to:

body {
  background-color: #fff;
}

body main {
  color: #000;
}

body main .title {
  color: #aaa;
}

Mixins

Mixins allow you to define styles that can be reused throughout the style sheet. You can think of mixins as functions in any other programming language. You can pass variables as well as functions in any other programming language. In SASS, mixins return a set of CSS rules. You can use syntax’s as follows: @include the syntax name defined by the directive mixin see the example below:

@mixin default-color {
  color: #1a0dab;
}

h1 {
  @include default-color;
  padding: 10px;
}

This compiles in the following:

h1 {
  color: #1a0dab;
  padding: 10px;
}

You can also use composite mixins as demonstrated in the example below:

@mixin default-height {
  height: 20px;
}

@mixin default-width {
  width: 40px;
}

@mixin default-border {
  border: 2px dashed;
}

.small-container {
  @include default-width;
  @include default-height;
  @include default-border;
}

This compiles in the following:

.small-container {
  height: 20px;
  width: 40px;
  border: 2px dashed;
}

Control Directives

Are you familiar with the SASS control directives?

These control directives include @if, @for, @each, and @while. How do they function in SASS?

@if directive

The @if directive takes a SASS expression and executes the block of styles beneath the directive if the evaluation of the expression does not return false or null. Let’s use a simple example to explain this:

p {
  @if (2+2 == 4) {
    color: #fff;
  }
  @if (true) {
    font-size: 16px;
  }
  @if (1 > 4) {
    color: $ff00ff;
  }
  @if (false) {
    font-size: 24px;
  }
}

This will compile to the following:

p {
  color: #fff;
  font-size: 16px;
}

The first two expressions are evaluated to be true, so the styles are added, while the other two are evaluated as false, hence their styles are not added.

If the expression is not true, there are other options beyond @if. You can go with @else if and @else statements in this case. So if the @if statement fails, the @else if statements will be executed until one succeeds or the @else is reached.

@mixin titleSetting($size) {
  @if ($size == large) {
    font-size: 32px;
  } @else if ($size == medium) {
    font-size: 24px;
  } @else if ($size == small) {
    font-size: 18px;
  } @else {
    font-size: 16px;
  }
}
h1 {
  @include titleSetting(large);
}

h2 {
  @include titleSetting(medium);
}

p {
  @include hetitleSettingading(hi);
}

This will compile to the following:

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

@for directive

The @for directive is used to output styles in a loop. This loop has a start and end value. The example below will make it clearer:

@for $i from 1 through 5 {
  .legend-#{$i} {
    width: (10 * $i)px;
  }
}

This will compile to the following:

.legend-1 {
  width: 10px;
}

.legend-2 {
  width: 20px;
}

.legend-3 {
  width: 30px;
}

.legend-4 {
  width: 40px;
}

.legend-5 {
  width: 50px;
}

@each directive

The @each directive is used for looping instead of starting and ending values as in the case of @for directive.
The syntax for @each — $var, where $var can be the name of any variable like $name.

@each $section in center, start, end {
  .section-#{$section} {
    display: grid;
    justify-content: #{$place};
  }
}

This will compile to the following:

.section-center {
  display: grid;
  justify-content: center;
}

.section-start {
 display: grid;
  justify-content: start;
}

.section-end {
  display: grid;
  justify-content: end;
}

@while directive

The @while directive takes an expression and executes the nested block of styles as long as the expression is not evaluated as false. It is similar to the @for directive but it can be used to execute much more complex loops compared to the ones that the @for directive is capable of.

If the @while directive is applied, a variable with a set value is used instead of a range of values. Let’s repeat our @for directive example using @while:

$i: 1;
@while $i < 5 {
  .legend-#{$i} {
    width: (10 * $i)px;
  }
  $i: $i + 1;
}

Let’s read the code written above: “while the variable $1 is not greater than 5, execute the nested block of styles”. This value is increased within the nested block of styles until it is no longer less than 5, which is the condition for it to return false, and then it stops.

This will compile to the following:

.legend-1 {
  width: 10px;
}

.legend-2 {
  width: 20px;
}

.legend-3 {
  width: 30px;
}

.legend-4 {
  width: 40px;
}

Note. When using the @while directive, remember that the loop will run forever if you don’t provide a condition for failure. In our example, we repeatedly increased the value of $i so the condition was set to return false at some point.

Conclusions

Using SASS extension will help you save a lot of time, automate a lot of your routine work and reuse your custom rules many times.

Knowledge of the directives described in this article will make your rules more concise and enable you to have a clear style that is easy to understand for other developers (and yourself, too!).

How to Install SASS?
Use this link to access the SASS documentation.
Sources of SASS are available here.
CSS's variables can be found here.

Previously published at maddevs.io.