Sass CSS Preprocessor Cheatsheet

Sass CSS Preprocessor Cheatsheet
Sass CSS Preprocessor

Sass Basics Cheatsheet

Variables
$black: #000;

.container {
   background: $black;
}

Comments
// Line Comment

/* 
   Block
   Comment
*/
Nesting
div{
  .a {
    display: block;
    text-decoration: none;
  }
}

Mixins
@mixin container {
   display: block;
   border: 1px solid #e2e2e2;
   border-radius: 2px
}

.sidebar{
   @container
}
Extends
%msg {
  font-size: 14px;
  color: #fff
}

.push-msg {
   @extends %msg;
}

Imports
@imports 'vars'

.header {
  font-size: $font-header;
}

Sass Flow Control Cheatsheet

@If
@mixin pic($size,$circle:false) {
   width: $size;
   height: $size;

   @if $circle{
      border-radius: 50%
   }
}

.pic{
  @include pic(100px,false);
}

.circle-pic {
   @include pic(100px,true);
}
@else
@mixin theme($dark:false) {
  @if $dark{
     background-color: #fff;
  } @else {
     background-color: #000;
  }
}
@else if
@mixin align($align) {
   if $align== 'left' {
       text-align: left;
   } @else if $align == 'right {
       text-align: right;
   } @else {
       text-align: center;
   }
}

Read Also