Simple, Elegant & Powerful

SCSS is a powerful preprocessing tool for css, the style sheets would be carrying an extension of .scss, however you can still write simple css in it. We will walk through few features of SCSS which made me to change the way I write css.

“Variables”

Similar to javascript, we can create constant and assign it with value, this will allow us in reusability. We can have global and local variables.

// variable.scss
// global variables
$width-constant: 100px;
$font-family: 'Open Sans', sans-serif;
$color-black: #00000;
.heading {
width:$width-constant;
 &--over-ride {
  // local variable
  $local_width: 100px;
  width: $local_width;
 }
}

This would be sufficient for a general use case, but it allows others to change the value as well, then how to make sure the value you set is global / default and allow users to over-ride and use them.

“@Use”

// variable.scss
$width-constant: 100px !default;
$font-family: 'Open Sans', sans-serif;
$color-black: #00000;
//heading.scss
@use 'variable' with (
  $width-constant: 200px;
);
.heading {
width:$width-constant;
}

“Import”

Import statement allows you to load scss file.

@import './variables.scss';
@import './mixin.scss';

“Mixin”

Mixin allows you to create re-usable styles. There are multiple ways to use mixin, I have created a padding mixin which allows you to define padding property based on input passed.

‘@mixin’ is the keyword, m-padding is the mixin name, $top, $right, $bottom and $left are the attributes and to set default value for an attribute you can simply do $top:0 , (if no value passed, 0 would be assigned)

@mixin m-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
padding-left: $left;
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
}

How to use the mixin created?

You can use the ‘@include’ keyword

@import './mixin.scss'; // I have defined the mixin in this file
.heading {
@include m-padding(10px,10px,10px,10px);
}
// I suggest to create variables for the value and use it
$padding-left: 10px;
$padding-right: 20px;
$padding-bottom: 10px;
$padding-top: 20px;
.heading {
@include m-padding($padding-top, $padding-right, $padding-bottom, $padding-left);
}

“SASS:MAP”

One of my favourite, to explain better, let me pick an example,

I have created a list of theme colours in key value and I would like to pick based on the key. This is really handy that you don’t need to check for conditions.

@use "sass:map"; // don't miss this
$theme-colors: (
"success": #28a745,
"info": #17a2b8,
"warning": #ffc107
);
.alert {
 background-color: map.get($theme-colors, "warning");
}

‘@IF’

Of course, we can write conditional statements, for example, to support dark theme, I prefer using the below, this allows me to set the colors based on the theme.

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

“@loop”

For loop, I would like to create a column class for grid component, then

$columns: 5; 
@for $i from 1 through $columns { 
  .columns-#{$i} { 
    width: (100% / $i); 
  } 
}
// Below is the style generated out of the loop
.columns-1 { width: 100%; }  
.columns-2 { width: 50%; }  
.columns-3 { width: 33.33333%; }  
.columns-4 { width: 25%; }  
.columns-5 { width: 20%; }

“@each”

Another way to loop through the array.

$themeColour: (
"success": #28a745,
"info": #17a2b8,
"warning": #ffc107
);
@each $themeColour, $i in $themeColour {    
  body {    
    &.#{$themeColour} { 
     background-color: $i;         
   }      
 } 
}

“@while”

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

.length-0 { width: 0px; }  
.length-1 { width: 10px; }  
.length-2 { width: 20px; }  
.length-3 { width: 30px; }  
.length-4 { width: 40px; }

These features makes you write simple, re-usable css code. These are easy to maintain, achieve code reusability.