Основы Sass/SCSS: начинаем работу с препроцессорами

Введение

Одна из постоянных задач в современной веб-разработке — необходимость создавать работающие, читающие и гибкие стили. Привычные CSS, хотя и кажутся простыми, не всегда удовлетворяют этим требованиям, порой оказываясь устаревшими. Здесь разработчиков выручают так называемые препроцессоры CSS: Sass и SCSS. Таблицы стилей Sass (Syntactically Awesome Stylesheets) и SCSS (Sassy CSS) — это инструменты, расширяющие базовую функциональность CSS. Они добавляют в привычные таблицы возможности для организации кода, повторного использования стилей, автоматизации процесса разработки. Расскажем подробнее о работе препроцессоров Sass/SCSS, рассмотрим их основные концепции, синтаксис, примеры применения на практике.

Что такое Sass/SCSS?

Sass и SCSS нельзя назвать самостоятельными языками программирования либо верстки. Это так называемые препроцессоры, то есть программы, которые преобразуют код на одном языке (Sass/SCSS) в код на другом (CSS).

По большому счету, это два разных синтаксиса одного и того же препроцессора:

• SCSS — более современный, приближенный по синтаксису к CSS с его фигурными скобками и точками с запятой;
• Sass — более ранний, использующий отступы вместо фигурных скобок.

Преимущества Sass/SCSS

Перечислим основные достоинства препроцессоров для веб-разработки.

• Организация и структурирование CSS. Код можно разбивать на модули, использовать вложенные стили, импортировать файлы CSS.
• Работа с переменными. Благодаря переменным одни и те же значения можно хранить и использовать в нескольких стилях.
• Вложенные правила. Благодаря вложенным друг в друга правилам код CSS можно сделать более организованным.
• Переиспользование стилей: поддержка переменных, вложенных правил, смесей (mixins) помогает создавать более компактный и читаемый код.
• Автоматизация процесса разработки благодаря циклам, условным операторам, математическим операциям.
•  Функции для работы с текстом, цветом, отступами.
• Возможность создания смешанных классов и комплексных стилей.
• Наследование свойств от родительских стилей.

Синтаксис Sass и SCSS

Теперь сравним между собой синтаксис обоих препроцессоров.

Выбор между Sass и SCSS

Оба препроцессора во многом аналогичны друг другу по функциональности и широко используются в разработке.

• У Sass более компактный и простой синтаксис. Он может быть удобнее для новичков и для тех, кто предпочитает работать с более лаконичным кодом.
• SCSS совместим с традиционным CSS-синтаксисом и отличается большей гибкостью. Поэтому он может быть более удобным для разработчиков, которые уже знакомы с CSS.

Для командной работы подходят оба варианта, но всем участникам нужно согласовать между собой использование одного из них в качестве стандарта.

Оба языка довольно легко компилировать в обычный CSS, поддерживаемый в любом браузере.

Основные функции Sass/SCSS

Рассмотрим вкратце основные функции препроцессоров. Они в большинстве случаев аналогичны друг другу в обоих вариантах.

Переменные

Благодаря переменным можно хранить значения, чтобы затем использовать их в разных местах кода. Так проще писать и менять стили веб-страницы.

Приведем пример с переменными main-color, отвечающими за цвет и шрифт соответственно.

Объявление переменной:

  $main-color: #333;  
  $font-family: "Arial", sans-serif;

Использование переменной: 

h1 {    color: $main-color;  }  
body {    font-family: $font-family;  }

Благодаря переменным задан черный цвет шрифта, Arial, без засечек.

Вложенные правила

Вложенные правила помогают структурировать код, упрощая тем самым его написание. Правила дочерних элементов вкладываются в родительские, помогая создать вложенную иерархию стилей (что особенно важно для больших проектов). Дочерние элементы наследуют характеристики родительских, что обеспечивает единообразие кода.

Пример вложенных правил:

 .container {    
width: 960px;    
margin: 0 auto;        
.row {      
display: flex;            
.col {        
flex: 1;        
padding: 10px;      
}    
}  
}

 Свойства таблицы распространяются и на ее строки и столбцы.

Смеси (Mixins)

Смеси — это наборы стилей, которые можно использовать в разных местах кода. Это наборы свойств CSS, применяемые к разным элементам, чтобы не дублировать код.

Объявление смеси с помощью ключевого слова mixin: 

@mixin button-style {    
background-color: #007bff;    
color: #fff;    
padding: 10px 20px;    
border: none;    
border-radius: 5px;    
cursor: pointer;  }

Использование объявленной смеси:

 .button { 
@include button-style; } 
.primary-button { 
@include button-style; 
background-color: #00c853; }

Свойства CSS, объявленные в смеси, были применены к конкретной кнопке.

Смеси можно переопределять, меняя стили в ходе выполнения кода, использовать повторно и организовать код, поделив его на логические блоки.

Условные операторы

Как и в классических языках программирования, условные операторы в Sass/ SCSS позволяют выставлять условия и выполнять разные действия в зависимости от их работы.

Пример условного оператора, задающего ширину таблицы в зависимости от того, просматривается ли страница с мобильной или с десктопной версии: 

@if $is-mobile {    
.container {      
width: 100%;    }  
} 
@else {    
.container {      
width: 960px;    }  
}

Условные операторы позволяют делать стили более гибкими и адаптивными.

Циклы

Циклы в препроцессорах позволяют многократно исполнять какие-либо последовательности действий, повторяя код несколько раз. Очень часто это делается, чтобы генерировать множество классов, которые затем можно многократно использовать в проекте.

Приведем пример цикла, задающего ширину и высоту объекта. 

@for $i from 1 to 5 {    
.item-#{$i} {      
width: 20px * $i;      
height: 20px * $i;    }  
}

С помощью циклов можно задавать стили для множества элементов без необходимости задавать их каждый раз вручную.

Практическое применение Sass/SCSS

Теперь приведем примеры практического применения Sass/SCSS в веб-программировании.

Создание компонентных стилей

Препроцессоры используются для создания компонентных стилей для часто используемых элементов сайта: кнопок, меню, карточек. Приведем пример со стилем для кнопки на сайте:

.button {    
@include button-style;        
.primary {      
background-color: #00c853;    }        
.secondary {      
background-color: #673ab7;    }  
}

  Создание темы

С помощью Sass/SCSS разработчики могут легко создавать темы для сайтов и приложений, меняя шрифты и цветовую гамму. Чтобы изменить эту тему (например, в новой версии сайта), достаточно будет лишь заменить названия переменных.

Приведем пример темы с цветовыми решениями для сайта: 

$primary-color: #007bff;  
$secondary-color: #673ab7;    
.button {    
background-color: $primary-color;    
color: #fff;  }    
.text {    
color: $secondary-color;  }

Автоматизация разработки

Циклы, условные операторы, математические действия в Sass/SCSS подходят для автоматизации разработки. Приведем пример с классами, отвечающими за ширину колонок в сетке:

@for $i from 1 to 12 {    
.col-#{$i} {      
width: (100% / 12) * $i;    }  
}

Каждая итерация цикла рассчитывает ширину колонки как долю от общей ширины сетки. В результате разработчику не приходится задавать правила для каждого элемента вручную: цикл заменяет эти действия одним.

Заключение

Sass/SCSS — полезный инструмент для веб-разработки. Освоив основы препроцессоров, вы можете легко создавать структурированный код, автоматизировать часть операций с ним, легко менять оформление веб-страниц и приложений. 

Sass/SCSS используют для создания сайтов, приложений, фреймворков CSS, компонентных библиотек. От небольших одностраничных сайтов-визиток до больших порталов, от лендингов до маркетплейсов — препроцессоры нужны везде, где требуется работа со стилем. Их несложно освоить человеку, знакомому с азами веб-программирования, а эффектом от их использования станет рост производительности труда разработчика.