SCSS Cheatsheet for fast paced web developers and website developers

01 Variables

Basic Variable:

$primary-color: #3498db;

Variable Interpolation:

$theme: light; $background: #{$theme}-background;

Variable Defaults:

$font-size: 16px !default;

02 Nesting

Selector Nesting:

.container {
   h1 {
     color: $primary-color;
   }
}

Pseudo-class Nesting:

a {
   &:hover {
     text-decoration: underline;
   }
}

Media Query Nesting:

.element {
   width: 100%;
   @media screen and (min-width: 768px) {
     width: 50%;
   }
}

03 Mixins:

Mixin Declaration:

@mixin flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

Mixin Usage:

.container {
  @include flex-center;
}

Mixin with Parameters:

@mixin button($color: $primary-color, $padding: 10px) {
  background-color: $color;
  padding: $padding;
}

Mixin with Arguments:

.primary-button {
  @include button($primary-color, 15px);
}

04 Control Directives

@if Statement:

$theme: dark;
.element {
  @if $theme == light {
     background-color: #fff;
  } @else {
     background-color: #333;
     color: #fff;
  }
}

@for Loop:

@for $i from 1 through 3 {
   .item-#{$i} {
     width: 100px * $i;
   }
}

@each Loop:

$colors: red, green, blue;
@each $color in $colors {
   .box-#{$color} {
     background-color: $color;
   }
}

05 Functions

Color Functions:

$base-color: #3498db;
.lighten-bg {
   background-color: lighten($base-color, 20%);
}

String Functions:

$text: "Hello, World!";
.uppercase-text {
   content: upper-case($text);
}

06 Extends

Extend Placeholder:

%shared-styles {
   border: 1px solid #ccc;
   padding: 10px;
}
.element1 {
   @extend %shared-styles;
   background-color: #f1f1f1;
}
.element2 {
   @extend %shared-styles;
   background-color: #fafafa;
}

Placeholder Selectors:

%placeholder {
   font-size: 14px;
   color: #555;
}
p {
   @extend %placeholder;
}
span {
   @extend %placeholder;
   font-weight: bold;
}

07 Mixins

Basic Mixin:

@mixin border-radius($radius) {
   border-radius: $radius;
}
.element {
   @include border-radius(5px);
}

Mixin with Default Values:

@mixin box-shadow($x: 0, $y: 0, $blur: 5px, $color: #000) {
   box-shadow: $x $y $blur $color;
}
.box {
   @include box-shadow(2px, 2px);
}

08 Operations

Math Operations:

.container {
   width: 100% / 3;
}
.element {
   height: 100px + 10px;
}

Color Operations:

$base-color: #3498db;
.darken-bg {
   background-color: $base-color - #333;
}

09 Maps

Color Map:

$colors: (   primary: #3498db,   secondary: #2ecc71,   danger: #e74c3c );
.button-primary {
   background-color: map-get($colors, primary);
}

Font Size Map:

$font-sizes: (   small: 12px,   medium: 16px,   large: 20px );
.text-large {
   font-size: map-get($font-sizes, large);
}