Некоторые основные концепции 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›’;
гварио.