Некоторые основные концепции scss, чтобы освежить мои воспоминания, а также ваши!

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Математика (+, -, *, /, %)

.elem { высота: 300 пикселей + 40 пикселей;

Переменные

Определение: $variablename: значение;

Использование: цвет: $variablename;

Условные

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

@if $var1 == 1 {
цвет: #333;
} @else if $var2 == 2 {
цвет: #444;
} @else {
цвет: #555;

Повторение

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

@for $i от 1 до 9 {
.offset-#{$i} { margin-top: 10% * $i; }

@each $element in elem1, elem2, elem3 {
.#{$element} {
content: 'this is #{$element}';
}

$i: 9;
@while $i › 0 {
.offset-#{$i} { margin-top: 10% * $i; }
$i: $i — 1;

Миксины (функции)

Определение: @mixin mixinname($param) { color: $param; фон: $параметр;

Использование: #element { @include mixinname(#333);

Наследование (множественное наследование)

Определение: .class { color: #333;

Использование: .anotherclass { @extend .class; фон: #333;

Частичные/импортные

Определение: _‹partial-filename›.scss

Использование: @import ‘‹partial-filename›’;

гварио.