Sass (basis)

Nesting Selectors

 .parent {
  color: blue;
  .child {
    font-size: 12px;
  }
  &:hover {
  color: black;
  }
}

↓CSS:

.parent {
  color: blue;
}

.parent:hover {
  color: black;
}

.parent .child {
    font-size: 12px;
}

Nesting Properties

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

↓CSS:

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

Variables In Sass

$translucent-white: rgba(255,255,255,0.3);

↓ use it in .scss

`background-color: $translucent-white;`

Lists

$standard-border: 4px solid black;

↓ use it in .scss

.parent {
  border: $standard-border;
}

Maps

$border-size: ("min": 2px, "medium": 4px, "max": 6px)

↓ use it in .scss

read more about Function

Mixin

create a variable with a set of prepared properties

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

can contains arguments +with default value +with nesting

@mixin dashed-border($width, $color: #FFF) {
  border: {
     color: $color;
     width: $width;
     style: dashed;
  }
}

↓ use it in .scss

span { //only passes non-default argument
    @include dashed-border(3px);
}
 
p { //passes both arguments
    @include dashed-border(3px, green);
}
 
div { //passes out of order but explicitly defined
   @include dashed-border(color: purple, width: 5px); 
}

Functions

@each $item in $list {
  //some rules and or conditions
}

@for $i from $begin through $end {
   //some rules and or conditions
}

width: if( $condition, $value-if-true, $value-if-false);

↓ use it in .scss

@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
    width: if($i % 2 == 0, 300px, 350px);
    margin-left: if($i % 2 == 0, 0px, 50px);
   }
}

@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }
}

@Extend

Use rules fron another class

.lemonade {
  border: 1px yellow;
  background-color: #fdd;
}
.strawberry {
  @extend .lemonade;
  border-color: pink;
}

%Placeholders