sainture
6/12/2016 - 1:20 PM

Control Directives

@if, @for, @each


/* Operators and IF/Else*/

$thickness : 1px;
$thicker : $thickness * 5; 

.sidebar {
  @if($thickness <= 1) {
    border-color: yellow;
  } @else {
    border-color: red;  
  }
}
// list
$color-list: $red, $blue, $green, $brown, $orange

// for loop
@for $item from 1 through length($color-list) {
  h#{$item} {
    color: nth($color-list, $item);
  }
}

// @each statement for lists
@each $name in $color-list {
  
}

// map data type (similar to js objects)
$colors: (
  default: $grey,
  primary: $blue,
  danger: $red
);

@each $key, $value in $colors {
  
}