Skip to content

Instantly share code, notes, and snippets.

@Alex-Space
Last active August 29, 2015 14:22
Show Gist options
  • Save Alex-Space/273c44b379fe6b6ce79c to your computer and use it in GitHub Desktop.
Save Alex-Space/273c44b379fe6b6ce79c to your computer and use it in GitHub Desktop.
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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment