Sass за 15 минут
Конечно, 15 минут - слишком короткое время для освоения практически чего угодно, в том числе и Sass, однако для ознакомления этого вполне может хватить.
Если вы пишете очень много кода на CSS, препроцессор может значительно сократить объём вашей работы и ваш уровень стресса. Использование таких инструментов, как Sass, Less, Stylus или PostCSS делает ваши CSS-файлы более читабельными и облегчает последующую их поддержку. Благодаря переменным и функциям код становится более организованным и позволяет разработчикам быстрее работать и совершать меньше ошибок.
В этой статье мы разберём, как он работает и как что-то сделать с его помощью.
Начало
Браузер не распознает файлы Sass, так что сначала их нужно скомпилировать в обычный CSS. Поэтому вам необходимо иметь что-нибудь для конвертации .scss файлов в .css. На этот счёт есть несколько возможных решений:
- Самое простое решение - браузерный конвертер для компиляции Sass на месте - SassMeister.
- Использование приложений: существуют как платные, так и бесплатные приложения. Можете узнать больше, перейдя по этой ссылке.
- Если вы любитель командной строки, как мы, то можете установить Sass на ваш компьютер и скомпилировать файлы вручную.
Если вы решите использовать командную строку, то можете установить Sass в его оригинальной обёртке, написанной на Ruby, или можете попробовать Node.js порт (наш выбор). Инструмент предоставляется в разном виде, но так как мы - истинные любители Node.js, мы предпочтём порт.
Вот так можно скомпилировать .scss файлы, используя командную строку:
node-sass input.scss output.css
Также пришло время упомянуть тот факт, что Sass предлагает нам два различных синтаксиса: Sass и SCSS. Оба выполняют одно и то же, просто по-разному написаны. SCSS новее и обычно считается лучше, чем предшественник, так что использовать будем его. Если хотите узнать про разницу двух подробнее, гляньте на эту статью.
Переменные
Переменные работают по такому же принципу, как и в любом языке программирования. Объявляя переменную, мы храним в ней какое-либо значение, которое обычно встречается в CSS в виде цвета, шрифта или целого набора свойств, например для box-shadow.
Ниже приведены примеры переменных как в SCSS, так и в CSS.
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
h1.title {
font: $title-font;
color: $cool-red;
}
div.container {
color: $cool-red;
background: #fff;
width: 100%;
box-shadow: $box-shadow-bottom-only;
}
h1.title {
font: normal 24px/1.5 "Open Sans", sans-serif;
color: #F44336;
}
div.container {
color: #F44336;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
Идея в том, что данный подход упрощает процесс повторного использования переменных, а также мы можем быстро изменить значение конкретной переменной там, где мы её объявляем, вместо повсеместного перепечатывания кода.
Mixin
Mixin можно также представить как класс-конструктор в языке программирования: вы используете ряд свойств из CSS, создавая отдельный объект, который потом используете где хотите, задавая разные значения его свойствам.
Ниже приведён пример использования Mixin в коде:
@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}
.small-blue-square {
@include square(20px, rgb(0,0,255));
}
.big-red-square {
@include square(300px, rgb(255,0,0));
}
.small-blue-square {
width: 20px;
height: 20px;
background-color: blue;
}
.big-red-square {
width: 300px;
height: 300px;
background-color: red;
}
Ещё один способ упростить себе работу с помощью Mixin - использование его в местах, где требуются префиксы для адаптации под разные браузеры.
@mixin transform-tilt() {
$tilt: rotate(15deg);
-webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: $tilt; /* IE 9 */
transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}
.frame:hover {
@include transform-tilt;
}
.frame:hover {
-webkit-transform: rotate(15deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: rotate(15deg); /* IE 9 */
transform: rotate(15deg); /* IE 10, Fx 16+, Op 12.1+ */
}
Extend
Следующая особенность, на которую мы взглянем, будет @extend, она позволяет вам наследовать CSS-свойства одного селектора от другого. Принцип работы напоминает Mixin, но Extend, как правило, используется для того, чтобы создать логическую связь между элементами страницы.
Extend используется, когда нам, к примеру, нужно два похожих элемента, которые имеют некоторые отличия. Например, давайте возьмём две кнопки: согласие и отмена.
.dialog-button {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
@extend .dialog-button;
background-color: #87bae1;
float: left;
}
.cancel {
@extend .dialog-button;
background-color: #e4749e;
float: right;
}
.dialog-button, .confirm, .cancel {
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
cursor: pointer;
}
.confirm {
background-color: #87bae1;
float: left;
}
.cancel {
background-color: #e4749e;
float: right;
}
Если вы взгляните на CSS код, то заметите, что Sass скомбинировал селекторы вместо повторения одних и тех же строк несколько раз в коде.
Вложенные конструкции
Как известно, в HTML, как правило, программист пишет код по принципу "гнездования". Иными словами, блоки кода находятся в других блоках кода и содержат вложенные блоки кода. CSS же в этом плане представляет собой полнейший хаос. Если для вас это проблема, Sass может помочь вам в организации кода.
Вот пример кода на SCSS:
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
И он же на CSS:
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}
Операции
Вы можете выполнять различные математические операции прямо в коде, что значительно упрощает работу в некоторых случаях.
$width: 800px;
.container {
width: $width;
}
.column-half {
width: $width / 2;
}
.column-fifth {
width: $width / 5;
}
.container {
width: 800px;
}
.column-half {
width: 400px;
}
.column-fifth {
width: 160px;
}
Хоть сейчас и обычный CSS предлагает те же возможности, правда в форме calc(), альтернативный вариант на Sass быстрее в написании, имеет операцию mod (%) и применяется на более широком спектре типов данных (цвета, строки).
Функции
В Sass имеется целый ряд встроенных функций разного рода. К примеру, функции для операций со строками, цветами или выполняющие различные математические операции вроде random() или round().
Чтобы было нагляднее, представим функцию darken($color, $amount), которая, как понятно из названия, затемняет или применяет hover.
Фрагмент кода на SCSS
$awesome-blue: #2196F3;
a {
padding: 10px 15px;
background-color: $awesome-blue;
}
a:hover {
background-color: darken($awesome-blue,10%);
}
И он же на CSS
a {
padding: 10px 15px;
background-color: #2196F3;
}
a:hover {
background-color: #0c7cd5;
}
Вдобавок к огромному списку встроенных функций, вы также можете объявлять свои собственные.
Материалы по Sass
- Официальная документация
- Полный список функций Sass
- Руководство по написанию разумного, поддерживаемого и масштабируемого Sass
- Немного практического материала
- The Sass Way
- Сравнение препроцессоров
- Видеоуроки по основам Sass
Заключение
Часть из приведённого выше, к слову, рано или поздно дойдёт и до обычного CSS, но пока препроцессоры - отличный способ облегчить процесс написания кода, и Sass - неплохой вариант для выбора.