DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mad Devs for Mad Devs

Posted on • Updated on

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

Example code from IDE, after SASS to CSS conversion.

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
Enter fullscreen mode Exit fullscreen mode

Selectors

body {
  color: #ddd;
}

body main {
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

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

body {
      color: #ddd;

      .main {
    color: #fff;
      }
    }
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

.main {
  color: #fff;
}

.main:hover {
  color: #aaa;
}  
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}  
Enter fullscreen mode Exit fullscreen mode

SCSS variables

SCSS variables start with a $ character.

$width: 30px;
$color: #fff;
body h1 {
  width: $width;
  color: $color;
}
Enter fullscreen mode Exit fullscreen mode

This will be compiled in the following:

body h1 {
  width: 10px;
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Insert: #{}

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

$name: bar;
$attr: background;
main.#{$name} {
  #{$attr}-color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

This compiles in the following:

main.bar {
  background-color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Attached import

If foo.scss is included as described below:

.title {
  color: #aaa;
}
Enter fullscreen mode Exit fullscreen mode

Then we can import this file to another SCSS construction:

body {
  background-color: #fff;

  main {
    color: #000;

    @import "foo";
  }
}
Enter fullscreen mode Exit fullscreen mode

This will compile to:

body {
  background-color: #fff;
}

body main {
  color: #000;
}

body main .title {
  color: #aaa;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

This compiles in the following:

h1 {
  color: #1a0dab;
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

This compiles in the following:

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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

This will compile to the following:

p {
  color: #fff;
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

This will compile to the following:

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

p {
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

@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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

@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};
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

@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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Previously published at maddevs.io.

Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.