Кратко о SaSS

Закончив курс Sass на codeacademy.
Я решил сделать простое описание возможностей  Sass с примерами.

Типы данных Sass
Strings
Lists
Maps
Colors

Логические операции

добавление +
вычитание -
умножение *
деление /
модуль от числа %.

Пример:
$width: 250px;

height: $width/6;
line-height: $width/6;




Подключение библиотек
@import 'reset';


Вложенность (Nesting)

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

Наследование (Extend)

.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.success {
@extend .message;
border-color: green;
}


Применение Mixins

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(10px); }

Использование операторов

Оператор each

$list: (orange, purple, teal);

@each $item in $list {
.#{$item} {
background: $item;
}
}

Оператор for

$total: 10; //Number of .ray divs in our html
$step: 360deg / $total; //Used to compute the hue based on color-wheel

.ray {
height: 30px;
}

//Add your for-loop here:
@for $i from 1 through $total {
.ray:nth-child(#{$i}){
background: adjust-hue(blue, $i * $step);
}
}

Оператор if
@mixin deck($suite) {
@if($suite == hearts || $suite == spades){
color: blue;
}
@else-if($suite == clovers || $suite == diamonds){
color: red;
}
@else{
//some rule
}
}