В предыдущей части данного обзора - “SASS в картинках - Часть 1” мы посвятили все время установке, настройке и примерам мониторинга “сладкой” парочки Ruby/SASS.
Разобрались, как установить под Windows платформу Ruby и ее приложение SASS, в чем отличия между старой и новой версией синтаксиса SASS. Как запустить SASS для мониторинга редактируемых файлов или директорий.
В этой статье мы приступим к самому интересному - разбору вкусностей SASS. Что он может, как он это делает. И каким образом мы можем облегчить себе жизнь с помощью него. И начнем с самого простого, постепенно переходя к более сложному.
Переменные (Variables)
SASS “вводит” в состав CSS переменные, которых изначально в нем нет. Тем самым, язык стилевых правил постепенно превращается в более-менее полноценный язык программирования. Как и в обычном языке программирования, сначала объявляется переменная (с помощью спецсимвола $
), задается ее имя и присваивается значение.
Затем эта переменная используется в последующем коде путем вызова ее по имени. Одновременно с применением переменной в коде с ней можно производить простые арифметические операции: сложение, вычитание, умножение и деление.
Например, на рисунке ниже переменной $color
присвоено значение цвета в HEX-формате. Далее в одном месте кода эта переменная применяется “как есть”, а в другом месте из значения переменной вычитается еще одно число в этом же формате. В результате цвет получается темнее на заданное количество - очень удобно и быстро!
Вложенность (Nesting)
Тут все просто - как вы обычно пишите правила CSS?
Наверное, так:
h1 {
font-size: 12px;
color: #ccc;
}
h1 a {
text-decoration: none;
color: #ddd;
}
То есть, пишем, что заголовку первого уровня присвоить свойства - кегль и цвет шрифта. Ссылке, вложенной в этот заголовок, присваиваем свойства - убираем подчеркивание и задаем свой цвет.
Теперь напишем этот же код на SASS (SCSS):
h1 {
font-size: 12px;
color: #ccc;
a {
text-decoration: none;
color: #ddd;
}
}
Вот в чем “фокус” - на SASS (SCSS) мы пишем код так, как видим. Смотрим HTML-код - ссылка вложена в тег h1
. Поэтому, в SASS-коде так и “рисуем” - внутри селектора h1
помещаем селектор a
, говоря тем самым SASS, что тег a
вложен в тег h1
. После конвертации в CSS-код у нас получиться точно такой код, как в первом примере (где представлен CSS-код):
В SASS вложенность (nesting
) бывает двух типов: вложенность селекторов (рассмотренная выше) и вложенность свойств, которую мы рассмотрим сейчас.
Вложенность свойств - это почти тоже самое, что и первый случай. Разница лишь в том, что применяется она к CSS-свойствам, а не селекторам. Ее удобно использовать для сложносоставных свойств, таких как font
.
Например, на CSS мы бы написали так:
h1{
font-size: 30px;
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
color: #ccc;
padding-left: 10px;
}
На SASS (SCSS) этот же код мы напишем так:
h1{
font: {
size: 30px;
style: italic;
weight: bold;
family: Arial, sans-serif;
}
color: #ccc;
padding-left: 10px;
}
Наследование
С помощью наследования можно значительно сократить код и ускорить его написание. Принцип также прост - если для одного элемента задан набор свойств, то можно для другого элемента указать наследовать эти же самые свойства.
Наследование в SASS (SCSS) выполняется с помощью директивы @extend
.
h1{
font: {
size: 30px;
style: italic;
weight: bold;
family: Arial, sans-serif;
}
color: #ccc;
padding-left: 10px;
}
h2{
@extend h1;
color: #aaa;
}
Parent
Не знаю, как переводиться данная фича в SASS, но в примере кода она очень понятна - может, и нет смысла искать ее перевод? Если кто изучал Javascript & jQuery, то знает о таком символе - &
. Его можно перевести как “этот”.
Давайте посмотрим код, и все сразу станет ясно:
Видим, что в коде для ссылки прописаны свойства. И в этом же правиле прописано правило для hover
. Так вот, чтобы не писать конструкции типа a
, a:hover
- запишем a
, &:hover
. Если описать это простым языком, то “этому же элементу присвоить правило при псевдоклассе :hover
.
Функции SASS
Когда мы рассматривали переменные, то упомянули об арифметических операциях над значением переменных. Иногда это удобно, а иногда нет. В SASS имеется достаточно большой набор функций, предназначенных для самых разнообразных задач. Ознакомиться с их полным перечнем можно по адресу sass-lang.com/docs/yardoc/Sass/Script/Functions.html:
К примеру, у нас в коде имеется правило задания цвета для ссылки. А также есть правило, по которому ссылка изменяет цвет по наведению на нее курсора мыши.
На SASS (SCSS) такой код можно написать так:
a{
color: #ddd;
}
a:hover{
color: darken(#ddd, 30%);
}
То есть, берем функцию darken()
и передаем ей в качестве аргументов два значения - первоначальный цвет и величину в процентах, на которую необходимо затемнить цвет.
Ну просто очень удобно и быстро!
Подмешивания (Mixin)
Подмешивания в SASS полностью отвечают своему названию, по принципу применения. Но, в тоже время, по принципу своей работы это самые настоящие функции. То есть, SASS еще больше расширяет возможности CSS и превращает его из описательного языка в язык программирования.
Если сказать простым языком, то mixin
- это большой кусок CSS-кода, который можно применять бесконечное число раз. Так же как и переменные, mixin
сначала объявляется с помощью директивы @mixin
и задается имя для него. Затем в теле подмешивания прописываются CSS-правила, при этом одновременно можно использовать переменные в этих правилах.
После объявления mixin
его подключают в нужном месте кода с помощью директивы @include
. Удобство применения подмешиваний заключается в том, что не нужно каждый раз писать один и тот же код в разных местах.
Достаточно прописать всего одну строчку - “вставить такой кусок кода здесь”:
Интерполяция (Interpolation)
Под таким непонятным первоначально словом подразумевается подстановка значения переменной в название CSS-свойства. Благодаря этому можно легко изменять само свойство в функции.
Например, таким образом:
(На картинке закралась ошибка. Конечно же, переменной $top
в названии свойства border
не существует. На ее месте должна стоять переменная $vert
).
Подмешивания (mixin
) с аргументами
Ранее мы познакомились с функциями без аргументов (mixin
). Но это был простой пример. На самом деле, функции (mixin
) в SASS могут иметь аргументы, которые они принимают в качестве параметров.
Например, рассмотрим такой рисунок:
Видим, что в начале кода объявлена функция (mixin
) с именем corners
. В качестве аргументов она принимает три переменные - $vert
, $hor
, $radius
. Значения переменных $vert
и $hor
передаются в тело функции как интерполяция, а значение переменной $radius
подставляется в качестве значения CSS-свойства border
.
В результате можно очень легко и быстро изменять вид и значение CSS-свойства: border-top-left: 8px
, border-bottom-left: 8px
, border-top-right: 8px
, border-top-right: 8px
и так далее.
Далее в коде подключается (вызывается) функция corners
с помощью директивы @include
. При вызове этой функции ей передаются аргументы:
@include corners(top,left,15px);
@include corners(bottom,right,35px);
В результате обработки этих аргументов функцией corners получиться следующий CSS-код:
border-top-left: 15px;
border-bottom-right: 35px;
Фантастика! Ну что же, на этом можно закончить обзор того, что умеет SASS (SCSS). Я думаю, что вы по достоинству оценили все преимущества данного языка и сразу же кинулись применять его на практике.
Вроде ничего не забыл ))
Комментарии