doc SASS

doc SASS

Compass mixins:
http://compass-style.org/examples/
@include background-size(cover);
@include opacity(0.5);
@include border-radius(25px);
@include box-shadow(red 2px 2px 10px);
@include inline-block;
* @include transition-property(width);
* @include transition-delay(2s);
@include text-shadow(rgba(blue, 0.2) 1px 1px 0;




@mixin - директива создания миксина (небольшого участка кода, который часто повторяется в документе)
@include - директива вызова миксина или функции
@extend - директива наследования. Наследует указанный класс, или айдишник ( @extend .content;)
@import - директива вызова файла
@debug - директива для консоли, используется в миксинах для экранирования переменных и отображения их значений в консоли.
@warn - дикертива аналогична @debug, только показывается в консоли больше инфы, в частности на какой строке она вызвана, а не только на какой описана, в отличие от@debug
%container - плейсхолдер, это штука - скрытый класс, он не компилируется, его как бы нет. Но когда мы его решим использовать, он появиться - напирмер: (@extend %container;)


$colors: red, blue, hotpink, grey, seagreen; - это одномерный массив
$colors: (
     'pink': #a4a,
     'grey': #ccc,
     'black': #000
); - это двумерный массив, с парами ключ-значение. Но для этого надо в цикле использовать так же пару ключ-значение. к примеру:
.btn {
     min-width: 120px;
     @each $name, $color in $colors {
          &-#{$name} {
               background: $color;
          }
     }
}


Функции в SASS:
Осветление, Затемнение, Сделать прозрачным цвет, и многое другое.

darken(color, amount);
lighten(color, amount); 
saturate(color, amount); 
desaturate(color, amount); 
alpha(color);



Условные операторы, циклы
$width: 580px;
.module {
     background: if($width>500, orange, red);
}

директива @if

@if $width >= 400px and $width < 768px {
     @media (min-width: 480px) {
               width: 50%;
      } @else if $width >=768px {
           @media (min-width: 768px) {
                 width: 33%;
            }
      } @else {
          width: 100%;
      }
}

цикл @for

$list: 10px, 20px, 30px, 40px;

.module {
     @for $i from 1 though 4 {
          $:nth:child(#{$i}){
               padding: nth($list, $i);
          }
     }
}

цикл @each

$colors: red, blue, hotpink, grey, seagreen;
.btn {
     min-width: 120px;
     @each $color in $colors {
          &-#{$color} {
               background: $color;
          }
     }
}