Simple, Elegant & Powerful

“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;
}
}

“@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 './variables.scss';
@import './mixin.scss';

“Mixin”

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

@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”

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

‘@IF’

$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”

$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”

$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; }

--

--

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