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.

@mixinis 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.

--

--

--

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Frameworks JS: Love or Leave them

Glance at the JavaScript arrow function

How to publish JavaScript Libraries

React — Starting the journey

Local Storage and Session Storage (JavaScript)

[Latest] CISF हेड कांस्टेबल भर्ती 2022 | CISF Recruitment 2022 | cisf head constable bharti

How to uppercase every first letter of every word in string in JavaScript

How To Run Angular With NodeJS API on Minikube

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Santhoshkumar Ravi

Santhoshkumar Ravi

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

More from Medium

Pulling Myself Up From My Bootstraps

How to reset CSS?

What does CSS do? The power of Cascading Style Sheets (1/3)

How TO Center A Div In CSS