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 extension. .sass 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 extension. .scss 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: { : ;

  .main { : ;
  }
} body color #ddd 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: { : ;

  &:hover { : ;
  } .main color #fff 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 { : Roboto; : ; : ;
} :root --font-family --text-size 1rem --font-color #000 SCSS variables SCSS variables start with a character. $ $ : 30 ;
$ : ; { : $width; : $color;
} width px color #fff body h1 width color This will be compiled in the following: { : ; : red;
} body h1 width 10px color 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 property: !global body { : rem !global;
  width: $width;
}

footer { : $width;
} $width 5 width SCSS & CSS Variables :root {
  --font-family: Roboto;
  --text-size: rem;
  --font-color: # ;
  --width: px;
}

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

footer { : $width;
} 1 000 30 var var 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 @ foo” screen; @ screen; @ , screen; import "foo.css”; //import foo.css
@import " //import foo.scss import "foo.scss" //import foo.scss import "foo" "bar" //import foo.scss и bar scss Attached import If is included as described below: foo.scss .title { : #aaa;
} color 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 { : # ;
}

body main .title { : #aaa;
} color 000 color 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: the syntax name defined by the directive mixin see the example below: @include @mixin -color { : # a0dab;
}

h1 {
  @include -color;
  padding: px;
} default color 1 default 10 This compiles in the following: h1 { : # a0dab;
  padding: px;
} color 1 10 You can also use composite mixins as demonstrated in the example below: @mixin -height { : px;
}

@mixin -width { : px;
}

@mixin -border { : px dashed;
}

.small-container {
  @include -width;
  @include -height;
  @include -border;
} default height 20 default width 40 default border 2 default default default Control Directives Are you familiar with the SASS control directives? These control directives include , , , and . How do they function in SASS? @if @for @each @while @if directive The 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: @if p {
  @ ( + == ) { : #fff;
  }
  @ ( ) {
    font-size: px;
  }
  @ ( > ) { : $ff00ff;
  }
  @ ( ) {
    font-size: px;
  }
} if 2 2 4 color if true 16 if 1 4 color if false 24 This will compile to the following: p { : #fff;
  font-size: px;
} color 16 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 . You can go with if and statements in this case. So if the statement fails, the if statements will be executed until one succeeds or the @else is reached. @if @else @else @if @else @mixin titleSetting($size) {
  @ ($size == large) {
    font-size: px;
  } @ ($size == medium) {
    font-size: px;
  } @ ($size == small) {
    font-size: px;
  } @ {
    font-size: px;
  }
}h1 {
  @include titleSetting(large);
}
h2 {
  @include titleSetting(medium);
}
p {
  @include hetitleSettingading(hi);
} if 32 else if 24 else if 18 else 16 This will compile to the following: h1 {
  font-size: px;
}

h2 {
  font-size: px;
}

p {
  font-size: px;
} 32 24 16 @for directive The 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 through {
  .legend-#{$i} { : ( * $i)px;
  }
} for from 1 5 width 10 This will compile to the following: .legend { : px;
}

.legend { : px;
}

.legend { : px;
}

.legend { : px;
}

.legend { : px;
} -1 width 10 -2 width 20 -3 width 30 -4 width 40 -5 width 50 @each directive The directive is used for looping instead of starting and ending values as in the case of directive. @each @for The syntax for — , where can be the name of any variable like . @each $var $var $name @each $section center, start, end {
  .section-#{$section} { : grid;
    justify-content: #{$place};
  }
} in display This will compile to the following: .section-center { : grid;
  justify-content: center;
}

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

.section-end { : grid;
  justify-content: end;
} display display display @while directive The 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 directive but it can be used to execute much more complex loops compared to the ones that the directive is capable of. @while @for @for If the directive is applied, a variable with a set value is used instead of a range of values. Let’s repeat our directive example using : @while @for @while $i: ;
@ $i < {
  .legend-#{$i} { : ( * $i)px;
  }
  $i: $i + ;
} 1 while 5 width 10 1 Let’s read the code written above: “ the variable is not greater than , 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. while $1 5 This will compile to the following: .legend { : px;
}

.legend { : px;
}

.legend { : px;
}

.legend { : px;
} -1 width 10 -2 width 20 -3 width 30 -4 width 40 : When using the 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 so the condition was set to return false at some point. Note @while $i 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 to access the SASS documentation. Sources of SASS are available . CSS's variables can be found . . this link here here Also published at blog.maddevs.io

Routine

SuperPower

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Mad Devs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Mad Devs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES