В этой статье вы найдете все, что вам нужно знать о SASS. Давайте начнем с определения того, что такое препроцессор CSS.
Что такое препроцессор CSS?
Препроцессор CSS – это что-то наподобие компилятора, который помогеют вам скомпилировать CSS-код, исходя из своего собственного уникального синтаксиса. Это значит, что вы можете написать код с помощью синтаксиса препроцессора, и он сгенерирует CSS-код на его основе. В большинстве случаев HTML-файлы ссылаются на такие CSS-файлы, чтобы выполнить оформление веб-страницы.
Для того, чтобы использовать препроцессоры CSS, вам не нужно изучать новый язык. Вы можете писать код так же как делали это на языке CSS. Кроме того, с помощью препроцессоров вы сможете сделать гораздо больше. Например, вы сможете создавать переменные и использовать их в коде многократно. Также вы сможете опустить в коде фигурные скобки и точки с запятой. Проще говоря, препроцессоры CSS помогают упростить процесс написания кода.
У CSS есть несколько препроцессоров. Однако именно SASS становится все более и более популярным среди веб-разработчиков. Давайте узнаем больше о том, что такое SASS.
Что такое SASS?
SASS расшифровывается как «Syntactically Awesome Style Sheets». SASS – это препроцессор CSS. SASS-код обрабатывается программой и компилируется в CSS-код, который уже может быть использован для оформления HTML-элементов. SASS контролирует то, как они будут отображаться на веб-странице.
Он совместим со всеми версиями CSS. Кроме того, у SASS есть разные функциональные возможности, например, создание переменных и вложенной структуры, импорт и т.д. Мы поговорим об этом чуть позже.
Синтаксис:
У SASS есть два разных синтаксиса: синтаксис с отступом и SCSS (Sassy CSS).
Как уже можно было понять из названия, синтаксис с отступом использует отступы, как в Python. Работая с синтаксисом с отступом, вы можете опускать фигурные скобки и точки с запятой.
Что же касается SCSS, это более новая версия, во многом похожая на CSS. В ней используются фигурные скобки для обозначения блоков кода и точки с запятой для разделения правил.
Как работает SASS?
Препроцессор CSS работает следующим образом:
- Вы пишите код на языке SASS.
- SASS-код компилируется в CSS-код.
- Вы добавляете этот CSS-код в HTML-файл.
Стало быть, вам нужны три файла: HTML, SASS и CSS.
Зачем нужен SASS?
Вы спросите, зачем нужно изучать SASS, если он такой же как CSS. Я отвечу, существует несколько причин (которые мы обсудим ниже), по которым SASS считается более эффективным для frontend-разработчиков.
SASS-код гораздо более структурирован, нежели обычный CSS-код, а это значит, что вы можете выполнять те же операции, но количество кода будет меньше. Так что, этот критерий имеет довольно важное значение для крупных проектов, в частности, если в них задействованы несколько разработчиков. Структурированное оформление позволяет всем разработчикам четко понимать код, который пишут и выполняют другие люди.
Изучение SASS не займет у вас много времени. Любой, кто знает CSS, может с легкостью изучить SASS, не тратя при этом огромных усилий и большого количества времени.
- Многократное использование
SASS предоставляет возможность многократного использования кода, чего нет в CSS. Таким образом, вы можете создавать переменные и блоки кода, которые разработчики смогут использовать в проекте повторно. В результате, снижается вероятность появления ошибок, а процесс внесения изменений в код, становится проще.
HTML-код для работы с SASS: примеры
Теперь, когда мы примерно представляем, что такое SASS и как он работает, давайте рассмотрим на примерах некоторые его функции. Для всех примеров в этой статье мы будем использовать вот этот HTML-код:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<div id="box1">
<h1>Hello, Welcome to Simplilearn!</h1>
<p>Here, you will learn about CSS and SASS.</p>
<ul>
<li>SASS</li>
<li>CSS</li>
<li>SCSS</li>
<li>Programming Languages</li>
<li>Courses</li>
</ul>
</div>
</body>
</html>
Результат:
Использование переменных в SASS
В SASS можно использовать переменные – все как в обычном языке программирования. С помощью этих переменных вы можете хранить информацию, которую затем сможете многократно использовать в коде. По сути, вы можете хранить в них любое значение CSS, например, шрифты, цвета, размеры и т.д. Определить переменную в SASS можно с помощью символа «$». Ниже приведен пример того, как можно использовать переменные в SASS.
SASS-код:
$font-stack: Times New Roman
$primary-color: #00FFFF
$pad: 10px
body
font-family: $font-stack
background-color: $primary-color
padding: $pad
Наберите этот код в файле input.sass. Как только вы напишете код, он будет скомпилирован в CSS-код, который вы сможете сохранить в файле mystyle.css. Ниже показано, как будет выглядеть скомпилированный CSS-код.
CSS-код:
body {
font-family: Times New Roman;
background-color: #00FFFF;
padding: 10px; }
При обработке SASS-файла значения, указанные в $font-stack и $primary-color, используются там, где упоминаются эти переменные. Затем этот CSS-файл будет использован HTML-файлом для получения следующего результата.
Результат:
Использование вложенной структуры в SASS
Использование вложенной структуры – это еще одна функциональная возможность SASS, навеянная HTML. Набирая HTML-код, вы четко видите вложенную систему кода. Это помогает наглядно видеть иерархию кода. Однако у CSS такой функции нет. SASS же позволяет вложенным селекторам обеспечивать аналогичную визуальную иерархию. Ниже приведен код, который использует вложенную структуру с приведенным выше HTML-кодом.
SASS-код:
$font: Calibri
$pad: 15px
$bgcolor: #00FFFF
$color1: #FF0000
$color2: #FFFF00
body
background-color: $bgcolor
#box1
margin: 10px
color: $color1
h1
font-family: Times New Roman
color: $color2
ul
font-family: $font
font-size: 15px
li
color: #800000
После того, как этот код будет скомпилирован, мы получим следующий CSS-код.
CSS-код:
body {
background-color: #00FFFF; }
body #box1 {
margin: 10px;
color: #FF0000; }
body #box1 h1 {
font-family: Times New Roman;
color: #FFFF00; }
body #box1 ul {
font-family: Calibri;
font-size: 15px; }
body #box1 ul li {
color: #800000; }
Как вы можете видеть, SASS позволяет вкладывать код в селекторы и при этом не требует предоставления внешней ссылки на него. После того, как браузер запустит этот CSS-код вместе с HTML-файлом, мы получим вот такой результат.
Результат:
Использование частичных шаблонов в SASS
Файлы стилевого оформления могут стать слишком большими, и осуществить управление ими может оказаться не такой простой задачей. Даже если вы используете SASS для того, чтобы структурировать свой код, большие файлы, так или иначе, приведут к немалому количеству ошибок. Решить эту проблему можно с помощью частичных шаблонов SASS.
Частичные шаблоны - это, по сути, фрагменты кода, которые вы можете написать в отдельном файле, но при этом не компилировать в CSS-код. В дальнейшем вы можете использовать эти файлы, добавляя их в какой-то другой SASS-файл.
Для того, чтобы создать файл с частичным шаблоном, вам нужно добавить нижнее подчеркивание перед именем файла. Например, вы можете назвать файл так: _font.css. Символ подчеркивания указывает SASS, что этот файл – это частичны шаблон SASS, и компилировать его не нужно. Кроме того, вы можете добавить в этот файл всю необходимую вам информацию и использовать ее в других SASS-файлах для его компиляции. Например, вы можете добавить в ваш файл _font.css всю информацию о шрифте, например, размер шрифта, семейство шрифтов, его цвет и т.д. А затем вы можете использовать этот файл в основном SASS-файле с помощью правила @use.
Использование импорта в SASS
Если вы хотите использовать в SASS частичные шаблоны, вы должны их вызвать в основном файле. Вы можете это сделать в SASS-файле с помощью правила @use. Например, для того, чтобы вызвать файл _font.css, вы можете написать следующее: @use ‘font’. Таким образом, вы импортируете всю информацию из частичного шаблона и сможете использовать ее в основном файле.
Использование миксинов в SASS
Миксины (или примеси) – это переменные, которые используются для хранения не просто одного значения, а целых блоков кода. Стало быть, если вы хотите использовать одно и тоже оформление для нескольких элементов, вы можете использовать миксины. Для того, чтобы создать набор кода, вам понадобиться директива @mixin, а для использования кода, добавленного в миксин, - правило @include. Ниже приведен пример миксина для оформления шрифта. Мы создадим миксин font_details и укажем в нем значения для оформления элементов в нашем HTML-коде.
Пример:
SASS-код:
$fs: 20px
$bgcolor: #00ffff
$pd: 20px 35px
@mixin font_details()
font-family: Georgia
font-size: $fs
background-color: $bgcolor
#box1
@include font_details()
padding: $pd
Скомпилировав программу, мы получим следующий CSS-код:
#box1 {
font-family: Georgio;
font-size: 20px;
background-color: #00ffff;
padding: 20px 35px; }
А запустив этот код вместе с нашим HTML-кодом (см. начало), мы получим следующий результат:
Кроме того, вы можете создать миксины, которые можно изменять. Для начала вы должны объявить их вместе с переменными, а определить вы их должны уже при использовании в коде. Например, наряду с миксионом font_details, мы создадим отдельные миксины h1_style и list_style с переменными и определим их при использовании кода.
Пример:
SASS-код:
$fs: 20px
$bgcolor: #00ffff
$pd: 20px 35px
@mixin font_details()
font-family: Georgio
font-size: $fs
background-color: $bgcolor
@mixin h1_style($size, $color)
font-size: $size
color: $color
@mixin list_style($size, $font)
font-size: $size
font-family: $font
#box1
@include font_details()
padding: $pd
h1
@include h1_style(30px, #ff0000)
ul
@include list_style(15px, Times New Roman)
Скомпилировав этот код, мы получим следующий CSS-код:
#box1 {
font-family: Georgio;
font-size: 20px;
background-color: #00ffff;
padding: 20px 35px; }
#box1 h1 {
font-size: 30px;
color: #ff0000; }
#box1 ul {
font-size: 15px;
font-family: Times New Roman; }
Когда мы запустим этот CSS-код вместе с нашим HTML-файлом, мы получим следующий результат:
Использование наследования в SASS
С помощью функции SASS @extend вы можете использовать несколько свойств для разных селекторов; выполнить это действие поможет класс placeholder (заполнитель). Этот класс будет выполняться только при наследовании. Воспользовавшись правилом @extend, вы можете наследовать любые селекторы CSS. Здесь мы рассмотрим пример наследования функций создания и оформления рамок для каждого селектора в нашем HTML-коде.
Пример:
SASS-код:
// This CSS will print because we will extend it. { // Этот CSS-код будет задействован, так как мы его будем использовать. }
%border_style
border: 5px solid #00ffff
padding: 25px
// This CSS won't print because we will never extend it. { // Этот CSS-код не будет задействован, так как мы не будем его нигде использовать. }
%wont-print
display: flex
margin: 20px
body
@extend %border_style
#box1
@extend %border_style
border-color: #ff0000
h1
@extend border_style
border-color: #00ff00
ul
@extend border_style
border-color: #0000ff
Этот код скомпилируется в следующий CSS-код:
body, body #box1 {
border: 7px solid #00ffff;
padding: 30px; }
body #box1 {
border-color: #ff0000; }
body #box1 h1 {
border-color: #00ff00; }
body #box1 ul {
border-color: #0000ff; }
А запустив файл с этим CSS-кодом вместе с нашим файлом index.html, мы получим следующий результат:
Использование операторов в SASS
С помощью операторов SASS вы можете выполнять математические вычисления для оформления веб-страниц. Допустим, что вам нужно работать с элементом, размер которого фиксированный. В таком случае операторы, например, +, -, *, % и math.div(), помогут преобразовать пиксельные значения в проценты для того, чтобы упростить вычисления макетов.
Заключение
Вы можете использовать SASS для самых разных целей. Вам нужно просто установить препроцессор, и вы сможете пользоваться всеми его возможностями. Возможно, вы уже заметили, что SASS-код идентичен CSS-коду, за исключением фигурных скобок и точек в запятой. Эта особенность делает этот код более понятным и структурированным. Использование SASS или других препроцессоров избавит вас от мучений с CSS. Однако, прежде чем переходить к работе в SASS, все же рекомендуется изучить все основы CSS, чтобы хорошо понять его концепцию.
