Узнайте, как использовать SASS/SCSS за 10 минут
Сколько раз мы писали один и тот же фрагмент кода CSS для одной HTML-страницы и задавались вопросом, есть ли какой-нибудь инструмент, который мог бы помочь с повторным использованием кода? Что ж, ответ — SASS/SCSS. Это препроцессор, который во время компиляции превращает код в файл CSS.
Sass, или «Syntactically Awesome Stylesheets», является языковым расширением CSS. Он добавляет функции, недоступные при использовании базового синтаксиса CSS. Sass позволяет разработчикам упростить и поддерживать таблицы стилей для своих проектов.
Sass может расширить язык CSS, потому что это препроцессор. Он берет код, написанный с использованием синтаксиса Sass, и преобразует его в базовый CSS. Это позволяет вам создавать переменные, вкладывать правила CSS в другие и импортировать другие файлы Sass, среди прочего. В результате получается более компактный и удобный для чтения код.
Ниже приведены несколько основных концепций SASS:
Переменные для хранения данных:
В Sass переменные начинаются с $
, за которым следует имя переменной. Например
$main-fonts: Arial, sans-serif;
$headings-color: green;
//To use variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
Гнездо CSS:
Sass позволяет вкладывать правила CSS, что является полезным способом организации таблицы стилей. Пример SASS-кода
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Эквивалентный код CSS
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
Миксины:
В Sass миксин — это группа объявлений CSS, которые можно повторно использовать во всей таблице стилей.
рассмотрим ниже код CSS
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
Требуется много печатать, чтобы переписать это правило для всех элементов, имеющих box-shadow
, или изменить каждое значение для проверки различных эффектов. Миксины похожи на функции для CSS. Вот как написать один:
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
Определение начинается с @mixin
, за которым следует пользовательское имя. Параметры ($x
, $y
, $blur
и $c
в приведенном выше примере) являются необязательными. Теперь каждый раз, когда требуется правило box-shadow
, только одна строка, вызывающая миксин, заменяет необходимость вводить все префиксы поставщиков. Миксин вызывается директивой @include
:
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
Операторы управления:
Директива @if
в Sass полезна для тестирования в конкретном случае — она работает так же, как оператор if
в JavaScript. Как и в JavaScript, @else if
и @else
проверяют дополнительные условия:
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
Директива @for
добавляет стили в цикл, очень похожий на цикл for
в JavaScript. @for
используется двумя способами: «от начала до конца» или «от начала до конца». Основное отличие состоит в том, что 'начало до конца' исключает конечное число как часть подсчета, а 'начало до конца' включает конечный номер как часть счетчика.
Вот пример от до конца:
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
Часть #{$i}
представляет собой синтаксис для объединения переменной (i
) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так:
.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
...
.col-12 { width: 100%; }
@each
перебирает каждый элемент списка или карты. На каждой итерации переменной присваивается текущее значение из списка или карты.
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
Приведенный выше пример кода преобразуется в следующий CSS:
.blue-text { color: blue; }
.red-text { color: red; }
.green-text { color: green; }
Директива @while
— это опция с функциональностью, аналогичной циклу JavaScript while
. Он создает правила CSS до тех пор, пока не будет выполнено условие.
Задача @for
дала пример создания простой системы сетки. Это также может работать с @while
.
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
Частицы:
Партиалы в Sass — это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ сгруппировать похожий код в модуль, чтобы он оставался организованным.
Имена для частичных файлов начинаются с символа подчеркивания (_
) и заканчиваются расширением файла .scss
. Чтобы перенести код из партиала в другой файл Sass, используйте директиву @import
.
Например, если все ваши миксины сохранены в партиале с именем «_mixins.scss», а они нужны в файле «main.scss», вот как использовать их в основном файле:
// In the main.scss file
@import 'mixins'
Продлевать:
В Sass есть функция extend
, которая позволяет легко заимствовать правила CSS из одного элемента и использовать их в другом.
Например, приведенный ниже блок правил CSS стилизует класс .panel
.
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
Директива extend
— это простой способ повторно использовать правила, написанные для одного элемента, а затем добавить еще для другого:
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
.big-panel
будет иметь те же свойства, что и .panel
, в дополнение к новым стилям.
Все, теперь начинайте использовать SAAS/SCSS