Большой самоучитель по SASS: что вам нужно знать!

Если вы уже создали сайт, то наверняка знакомы с CSS. Однако вы могли упустить некоторые скрытые возможности при работе с языком таблиц стилей. Создание сайтов с помощью CSS может быть очень утомительным, поэтому так много разработчиков сейчас полагаются на SASS. За этой аббревиатурой скрывается обещание: синтаксически удивительные таблицы стилей. SASS — это и препроцессор, и язык таблиц стилей.

Тот факт, что это препроцессор, объясняется тем, что его нужно преобразовать. Прежде чем SASS начнет работать, исходный код должен быть скомпилирован в обычный CSS. Мы также объясним, как работает этот шаг в подробном учебнике по SASS. Чтобы упростить изучение SASS, мы будем делать шаг за шагом и объяснять все на примерах.

Совет

Вы найдете больше информации в нашей обзорной статье Больше информации о SASS.

Требования к SASS

SASS в принципе не зависит от платформы, что означает, что вы можете работать с ним на PC, Mac или Linux. SASS основан на Ruby, по крайней мере, в первоначальной версии. Поэтому вам необходимо, чтобы этот язык программирования был интегрирован в вашу систему. В macOS Ruby должен быть предустановлен. Для ПК с Windows вы можете использовать RubyInstaller. Установочный пакет содержит язык, среду разработки (которая не нужна для SASS) и документацию. Установка также проста для пользователей Linux.

Совет

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

Проект LibSASS также привносит SASS в другие языки программирования: C/C++, Java, JavaScript, Node PHP, Python и некоторые другие языки. Используя соответствующие обертки (инструмент реализации), вы можете использовать преимущества других языков программирования. LibSASS, предназначенный для библиотек, а также информацию о доступных обертках можно найти на официальном сайте проекта.

Установка SASS

Существует несколько способов установить SASS в вашу систему. В то же время было создано несколько приложений, призванных облегчить вашу работу с языком таблиц стилей. Некоторые из них бесплатны, а некоторые (например, Koala или Scout App) доступны бесплатно как программное обеспечение с открытым исходным кодом. В принципе, однако, вам не нужны никакие дополнительные программы для использования SASS в вашей системе. Ruby содержит менеджер пакетов gem, с помощью которого язык таблиц стилей может быть легко реализован с помощью команды командной строки. Для этого откройте терминал или командную строку и введите следующую команду:

gem install sass

Этого должно быть достаточно. Если вы получите сообщение об ошибке, возможно, у вас нет необходимых прав на установку. Это можно исправить, воспользовавшись командой sudo (macOS, Linux) или запустив командную строку от имени администратора с помощью правой кнопки мыши (Windows). Чтобы проверить, была ли установка успешной и актуальной, спросите у SASS, какая версия установлена:

sass -v

Помимо установки, необходимо также настроить компиляцию. Для того чтобы ваш SASS-код работал на сайте, его необходимо сначала преобразовать в CSS. Это можно сделать несколькими способами: Если вы выбрали одну из программ для установки SASS, вы также можете использовать ее для компиляции. Если вы работаете с бегунками задач Grunt или Gulp, они сделают эту работу за вас, как только вы их настроите. Для некоторых текстовых редакторов есть даже плагины, которые выполняют компиляцию за вас. Однако вы также можете выполнить этап преобразования из командной строки.

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

sass --watch example.sass:example.css

Вы можете контролировать файл «example.sass» и компилировать исходный код в файл «example.sass». Если вы добавите в папку проекта еще две подпапки — одну для файлов SASS, а другую для файлов CSS, — то назовите их соответственно «sass «и «css», и вы сможете отслеживать всю папку:

sass --watch sass:css

Как только вы внесете изменения в файлы SASS и сохраните их, компилятор автоматически перезапишет существующие файлы CSS новыми версиями.

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

Возможно, вы захотите перевести свой существующий сайт, уже написанный на традиционном CSS, на SASS. Вам также потребуется преобразовать свой старый CSS-код. Однако прежде чем это сделать, вам следует подумать, хотите ли вы работать в оригинальном синтаксисе SASS (сокращенно: SASS) или выбрать более новый вариант SCSS. Подробнее о разнице между SASS и SCSS вы можете прочитать в нашей базовой статье. Существуют также команды для преобразований:

sass-convert example.css example.sass
sass-convert example.css example.scss

Конвертер считывает соответствующие форматы из расширений файлов. В качестве альтернативы можно воспользоваться полезным и простым веб-сайтом: для конвертеров CSS 2 SASS/SCSS введите ваш CSS-код в левой части окна и выведите преобразованный исходный код в нужном формате в правой части. Теперь вам остается только скопировать код в файл. Если вы решили использовать SCSS, конвертация будет оптимальной: переименуйте ваши файлы — вместо «.css» просто напишите «.scss». Любой код, написанный с использованием правил CSS, также работает под SCSS.

SASS: синтаксис языка стилей

Как уже упоминалось ранее, существует более одного синтаксиса, когда речь идет о SASS. Утвердились два конкурирующих формата. Первоначально SASS был основан на синтаксисе, известном сегодня как «синтаксис с отступами», где отступы вызывают вложенность, а перевод строки фактически завершает строку кода. SCSS, с другой стороны, больше ориентирован на формат CSS и требует фигурных скобок и точек с запятой. Чтобы этот учебник работал независимо от синтаксиса, мы представим процедуру в обоих форматах. Вот пошаговое руководство по особенностям SASS.

Совет

Если вы просто хотите протестировать язык таблиц стилей, вы можете сделать это в браузере. Используя Sass.js Playground или SassMeister, введите свой код в режиме онлайн и непосредственно создайте соответствующий исходный код в CSS.

Переменные

Большинство веб-разработчиков ценят использование переменных в SASS. С помощью этой полезной функции вы можете сохранить информацию под псевдонимом и использовать ее повторно в любом месте. Переменные очень популярны, например, в спецификациях цвета и размера. Переменная может использоваться для хранения шестнадцатеричного значения цвета или для настройки фиксированного размера с помощью математических функций. Переменные вводятся в SASS с помощью знака доллара ($):

SASS

$bg-color: #df0174
$size: 1em

SCSS

$bg-color: #df0174;
$size: 1em;

Затем вам просто нужно вставить переменные в соответствующие места кода:

SASS

$bg-color: #df0174
$size: 1em

body
background-color: $bg-color
margin: $size * 2

SCSS

$bg-color: #df0174;
$size: 1em;

body {
background-color: $bg-color;
margin: $size * 2;
}

При компиляции компилятор снова адаптирует синтаксис к CSS и разрешает переменные:

CSS

body {
background-color: #df0174;
margin: 2em;
}
Примечание

При именовании значений цвета в виде переменных действуют два разных принципа. Некоторые разработчики считают удобным называть цвет напрямую ($pink), другие предпочитают указывать его назначение ($bg-color). В принципе, однако, вы можете свободно выбирать имя переменных.

Может оказаться полезным указать значение по умолчанию для некоторых переменных. Если не определено иное, SASS предполагает эту информацию. И наоборот, если вы определите переменную по-другому, информация по умолчанию будет проигнорирована. Это может быть полезно, например, если разработчик передает незаконченный продукт клиенту, который все еще хочет внести изменения, или если веб-дизайнер использует свой собственный шаблон. Вы можете создать подобную предустановку, установив флаг «!default». Вы можете вводить как обычные значения, так и переменные, которые уже были определены:

SASS

$text-color: #000000 !default
$background-color: $bg-color !default

SCSS

$text-color: #000000 !default;
$background-color: $bg-color !default;

Импортирование

В SASS есть удобная директива, которая позволяет включать в таблицу стилей другие файлы. Например, вы создаете файл, в котором определяете все переменные (здесь вы можете указать и назвать все необходимые значения цветов), а затем импортируете этот файл. Теперь используйте информацию из импортированного файла так, как если бы она находилась в текущем исходном коде. Это поможет вам сохранить чистоту таблиц стилей. Вы можете импортировать сколько угодно файлов, используя «@import»- даже для подкаталогов. Функция даже обрабатывает импорт нескольких файлов за один шаг:

SASS

@import "variables"
@import "partials/styles"
@import "partials/test-a", "partials/test-b"

SCSS

@import "variables";
@import "partials/styles";
@import "partials/test-a", "partials/test-b";

Если вы хотите включить файлы .sass. или .scss, вам не нужно указывать расширение файла; система автоматически предполагает, что вы имеете в виду эти типы файлов. Вы также можете включить файлы CSS. Однако при этом вы также указываете расширение, чтобы компьютер точно знал, что вы имеете в виду. Компиляция также решает это упрощение: окончательный CSS-код больше не содержит директивы, только информацию из соответствующих файлов.

Частицы

Частицы — это самое распространенное явление, которое вы будете импортировать при работе с SASS. Партиклы — это фрагменты кода, и они позволяют создавать модули, которые можно легко устанавливать снова и снова. Если вы присваиваете имя файлу, важно поставить знак подчеркивания перед фактическим именем. Это сообщает компилятору, что соответствующий файл не требует CSS-аналога. В противном случае система будет преобразовывать все файлы SASS в CSS при надлежащем контроле.

Если вы импортируете партиции, опустите подчеркивание. SASS также знает, какой файл вы имеете в виду. Поэтому необходимо, чтобы вы не создавали файлы с одинаковыми именами. Если у вас есть и «example.sass», и «_example.sass», это приведет к ошибке. Это также относится к расширениям файлов: «example.sass» и «example.scss» не должны находиться в одном каталоге.

Миксины

Еще одной важной директивой являются миксины. Это фиксированные правила, которые можно вызывать снова и снова в таблице стилей без необходимости вставлять весь код заново. Это помогает работать быстрее и сохранять код более компактным. Все, что разрешено в SASS, может быть включено в миксин — правила, параметры или функции. Даже если место в миксине не имеет ограничений, он не должен содержать более двадцати строк. Конечная цель — повысить простоту вместо того, чтобы все усложнять.

Чтобы эффективно работать с миксинами, вам нужны две директивы: «@mixin» и «@include». С помощью первой вы создаете шаблон, с помощью второй — включаете блок кода:

SASS

@mixin big-blue-text
font-family: Arial
font-size: 25px
font-weight: bold
color:#0000ff

SCSS

@mixin big-blue-text {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color:#0000ff;
} 
}

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

SASS

@include big-blue-text

SCSS

@include big-blue-text;

В конечном коде CSS вместо миксина появляется полный блок исходного кода. Определение самого миксина (@mixin) там больше не появляется.

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

Extend

Правило extend сэкономит вам много работы. Эта директива гарантирует, что все свойства одного класса будут переданы другому. Чтобы не переопределять все заново, используйте «@extend». Директива также работает как цепочка. Класс, определенный с помощью «@extend», может быть частью третьего класса:

SASS

.button-scope
  margin: 5px
  border-radius: 2px
.home-button
  @extend .button-scope
  background-color: $black
.back-button
  @extend .home-button

SCSS

.button-scope {
  margin: 5px;
  border-radius: 2px;
}
.home-button {
  @extend .button-scope;
  background-color: $black;
}
.back-button {
  @extend .home-button;
}

Компилятор преобразует код следующим образом:

CSS

.button-scope, .home-button, .back-button {
margin: 5px;
border-radius: 2px;
}

.home-button, .back-button {
background-color: #000000;
}

В некоторых ситуациях вы определяете внешний вид категории, которую вы не хотите использовать на вашем реальном сайте, используя форму @extend. Это часто случается, когда вы создаете свою собственную библиотеку. Для таких ситуаций SASS предлагает селекторы-заместители. Вы используете знак процента (%) для обозначения класса, который вы создаете только для использования в других классах. Если вы не импортируете такой селектор при создании сайта, SASS не будет компилировать его в CSS:

SASS

%module
  margin: 20px
  padding: 10px
  color: $bg-color
.post
  @extend %module
  color: $grey

SCSS

%module {
  margin: 20px;
  padding: 10px;
  color: $bg-color;
}
.post {
  @extend %module;
  color: $grey;
}

В окончательном коде CSS класс «модуль» больше не появляется. Их свойства передаются непосредственно классу «post».

CSS

.post {
margin: 20px;
padding: 10px;
color: …;
}

.post {
color: #D3D3D3;
}

Флаг «!optional» также может быть очень полезен для расширения — если вы напишете расширение для несуществующего класса, SASS выдаст ошибку при компиляции. С помощью !optional вы можете избежать этого. SASS просто проигнорирует команду, если не найдет подходящего класса.

Совет

Эффекты миксинов и «@extend» очень похожи, и в большинстве случаев имеет смысл использовать миксины. Подробную статью о различиях можно найти на сайте csswizardry.com.

Вложенность

В HTML само собой разумеется, что код разделен на иерархическую древовидную структуру. CSS игнорирует эту функцию и заставляет пользователя объявлять свойства снова и снова. SASS возвращает возможность вложенности в таблицы стилей, позволяя подкатегориям наследовать свойства родительской категории. Это также гарантирует, что код в целом остается более тонким, а работы по его написанию и ожиданию меньше. Например, можно определить внешний вид ссылок и внутри вложенности определить, как эти ссылки выглядят при наведении — или если они уже были посещены.

Если в коде используется вложенность, то амперсанд (&) используется для замены части селектора на родителя.

SASS

a
  color: $blue
  &:visited
    color: $red
  &:hover
    color: $purple

SCSS

a {
  color: $blue;
  &:visited {
    color: $red;
  }
  &:hover {
    color: $purple;
  }
}

Во время компиляции вложенность должна быть разрешена снова. В CSS каждое состояние снова определяется отдельно.

CSS

a {
color: #0000FF;
}

a:visited {
color: #FF0000;
}

a:hover {
color: #551A8B;
}

Кроме разрешения вложенности, компиляция также гарантирует, что переменные (определение которых мы опустили в примере) снова станут шестнадцатеричными значениями.

Примечание

Вложенность — очень полезный инструмент, позволяющий сохранить стройность и эффективность исходного кода таблицы стилей. Однако существует тенденция чрезмерного использования этой возможности вложенности, что приводит к обратному эффекту и созданию сложной системы структурирования. Это может вызвать проблемы, особенно при модификации и обслуживании. По этой причине следует воздерживаться от вложенных элементов, начиная с третьего уровня.

С помощью вложенности вы также можете передавать «свойства». CSS знает некоторые характеристики, которые принадлежат к одному семейству. Например, вся информация о форматировании шрифта принадлежит к одному семейству, но должна быть определена в CSS как отдельные точки — с их полными именами свойств. SASS дает вам возможность группировать отдельные свойства под именами семейств.

SASS

.example
font:
    family: serif
    style: normal
    size: medium

SCSS

.example {
font: {
    family: serif;
    style: normal;
    size: medium;
  }
}

Функции

SASS имеет множество функций, облегчающих работу с таблицей стилей. Это готовые рабочие процессы, которые в противном случае вам пришлось бы выполнять вручную. Функции могут быть отнесены к различным категориям:

  • Цвета: С помощью этих функций можно регулировать значения цвета, насыщенность, прозрачность и многие другие свойства. Например, с помощью функции mix() можно смешать новый цвет из двух цветов.
  • Слушать: Для списков (серии значений свойств CSS) вы можете использовать функции, чтобы, например, считать количество записей или объединить несколько списков в один.
  • Строки: Строки — это фиксированные строки, подобные тем, которые используются в текстах. Функции такого рода автоматически помещают строку в кавычки полного текста прописными буквами.
  • Селекторы: С помощью этой категории функций вы можете манипулировать полными селекторами. Например, «selector unify()» позволяет из двух селекторов сделать один. Это может сэкономить вам много бумажной работы.
  • Числа: В области чисел, значений или единиц измерения вы найдете функции, которые могут, например, округлять в большую или меньшую сторону, находить наибольшее число в наборе или выводить случайное число.
  • Карты: В SASS карты — это структуры данных, состоящие из ключей и свойств. Соответствующие функции манипулируют коллекциями. Например, вы можете объединить две карты или удалить определенный ключ из карты.
  • Интроспекция: Функции из этой области позволяют получить представление о содержимом всей таблицы стилей. Например, можно проверить, существует ли в коде определенная функция, миксин или функция.
  • Разное: Разное SASS включает полезную функцию «if()». Ее не следует путать с одноименной директивой. Разница объясняется в разделе «Ветвление» ниже.
Совет

Полный список функций SASS, которые уже включены в установочный пакет, можно найти в официальной документации языка стилей. Там же вы сможете найти краткое объяснение каждой функции.

Вы всегда вставляете функции в код по одной и той же схеме: каждая функция имеет индивидуальное имя и содержит определенные параметры в скобках, разделенные запятыми. В конце функция выводит одно значение. На примере простой, но очень полезной функции mix() мы объясним синтаксис SASS:

SASS

$color-1: #ffff00
$color-2: #0000ff
body
background-color: mix($color-1, $color-2, 30%)

SCSS

$color-1: #ffff00;
$color-2: #0000ff;
body {
background-color: mix($color-1, $color-2, 30%);
}

С помощью этой функции смешиваются два значения цвета, которые вы уже определили как переменные (значения цвета не нужно сохранять как переменные; вы можете поместить шестнадцатеричные значения непосредственно в функцию). Третий параметр — это коэффициент смешивания: в нашем примере в конечный результат включается 30% от «$color-1». Если вы оставите последний параметр пустым, SASS примет соотношение 50/50. В самом CSS появится только одно значение — шестнадцатеричное значение результирующего цвета:

CSS

body {
  background-color: #4d4db3;
}

Все функции, упомянутые до сих пор, уже находятся в состоянии поставки SASS. Язык таблиц стилей также позволяет определять собственные функции для проекта. Это облегчает и ускоряет выполнение часто повторяющихся этапов работы. Это означает, что функции похожи на миксины. В то время как последние имеют на выходе строки кода, функции возвращают только одно значение. Создают функции с помощью соответствующей директивы «@function». Фактически, вы всегда создаете функцию с помощью пары директив. В дополнение к «@function» требуется встроенная «@return», где вы определяете выходное значение:

SASS

$column-count: 12
@function column-width($num)
@return $num * 100% / $column-count

.three-columns 
width: column-width(3)

SCSS

$column-count: 12;
@function column-width($num) {
@return $num * 100% / $column-count;
}

.three-columns {
width: column-width(3);

Вы можете использовать примерную функцию для расчета ширины колонок для сетки макета. В данном примере имеется 12 столбцов. На следующем этапе назовем функцию и определим, сколько параметров она содержит — в данном примере это число. Кроме того, мы определяем, что должна делать функция, а значит, и какое значение она выводит. В данном случае «column-width» умножает число, которое вы ввели в качестве параметра, на 100% и делит результат на количество столбцов. Определив функцию, вы можете использовать ее снова и снова, изменяя параметры. В конечном CSS сохраняется только результирующее значение:

CSS

.three-columns {
  width: 25%;
}
Совет

При создании функций в имени можно использовать символы привязки или подчеркивания. Если вы вызываете функцию позже, различие не имеет значения. И «function-name», и «function_name» вызывают одну и ту же функцию.

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

Петли

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

  • @for
  • @while
  • @each

Цикл «@for» является стандартным случаем цикла в контексте программирования. Цикл начинается с самого начала и повторяет работу до тех пор, пока не будет достигнуто состояние выхода и конец. В SASS эта директива встречается в двух различных вариантах: Либо последний цикл запускается снова при достижении цели, либо цикл выходит из него заранее.

SASS

@for $i from 1 through 4
  .width-#{$i}
width: 10em + $i
@for $i from 1 to 4
  .height-#{$i}
height: 25em * $i

SCSS

@for $i from 1 through 4 {
  .width-#{$i} { width: 10em + $i; }
}
@for $i from 1 to 4 {
  .height-#{$i} { height: 25em * $i; }
}

После директивы вы сначала указываете любую переменную ($i), а затем определяете начальную точку (1) и конечную точку (4). Через «through» вы указываете, что четвертое повторение также должно быть выполнено, в то время как цикл останавливается после третьего прохода. Если вы укажете для начального значения большее значение, чем конечное значение, SASS будет считать в обратном порядке. У вас есть два элемента в цикле: в CSS выбирается имя, которое получает большее число с «#{$i}». Переменная — а значит, и имя — увеличивается на 1 при каждом запуске.

Факт

«#{}» — это «интерполяция» в SASS. Это позволяет объединить переменную с самоназначенным идентификатором.

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

CSS

.width-1 {
width: 11em;
}

.width-2 {
width: 12em;
}

.width-3 {
width: 13em;
}

.width-4 {
width: 14em;
}

.height-1 {
height: 25em;
}

.height-2 {
height: 50em;
}

.height-3 {
height: 75em;
}

Директива «@while» работает очень похоже на «@for». Однако в то время как последняя имеет фиксированные начальную и конечную точки, цикл «@while» содержит логический запрос: пока состояние истинно, утверждения повторяются. Как вы увидите, мы можем добиться точно такого же результата с помощью функции «@while»:

SASS

$i: 1
@while $i < 5
  .width-#{$i}
width: 10em + $i
  $i: $i + 1

SCSS

$i: 1;
@while $i < 5 {
  .width-#{$i} { width: 10em + $i; }
  $i: $i + 1;
}

В этом типе цикла сначала нужно присвоить значение переменной, так как сама директива не требует начального значения. В цикле вы указываете состояние, до которого выполняются повторения. В нашем примере цикл выполняется до тех пор, пока переменная меньше 5. Оператор внутри цикла изначально такой же, как и в примере «@for». Опять же, измените имя элемента переменной и увеличьте его размер. Кроме того, в цикл необходимо включить команду, которая увеличивает «$i» на каждом проходе, иначе цикл будет выполняться до тех пор, пока компилятор SASS не будет остановлен. В конце, однако, вы получите тот же код CSS, что и в цикле «@for».

Директива «@each», с другой стороны, работает несколько иначе. Этот цикл основан на списке: цикл проходит через определенную вами коллекцию данных. Для каждой записи «@each» делает свой собственный повтор. Например, можно получить тот же результат, что и в других циклах, задав список со значениями 1,2,3 и 4. Однако реальное преимущество этого цикла заключается в том, что в список можно вводить и другую информацию, помимо числовых значений — например, использовать «@each» для вставки различных изображений в дизайн. Вы можете либо ввести данные непосредственно в директиву, либо сначала ввести список в переменную, а затем вызвать ее.

SASS

$list: dog cat bird dolphin
@each $i in $list
  .image-#{$i}
    background-image: url('/images/#{$i}.png')

SCSS

$list: dog cat bird dolphin;
@each $i in $list {
  .image-#{$i} { background-image: url('/images/#{$i}.png'); }
}

Здесь вам также понадобится переменная. Она принимает имя одной из записей в списке при каждом запуске. Имя интегрируется как в название блока кода, так и в имя файла изображения. Для того чтобы конструкция работала в дальнейшем, необходимо сначала сохранить соответствующие изображения по указанному пути. Цикл автоматически обеспечивает переход к следующей записи переменной.

CSS

.image-dog {
background-image: url("/images/dog.png");
}

.image-cat {
background-image: url("/images/cat.png");
}

.image-bird {
background-image: url("/images/bird.png");
}

.image-dolphin {
background-image: url("/images/dolphin.png");
}

Ветвление

Помимо циклов, SASS предоставляет вам еще одно средство, пришедшее из мира программирования: ветвление по принципу if-then-else. С помощью директивы «@if» вы выполняете оператор только при наличии определенного состояния, в противном случае в действие вступает другая команда. Помимо директивы, существует также функция if(). Обе они независимы друг от друга, но могут встречаться и вместе. Саму функцию можно легко объяснить. Она содержит три параметра: условия и два различных выхода. Первый выход выдается, если первый параметр истинен, в противном случае функция воспроизводит третий параметр.

SASS

$black: #000000
$white: #ffffff
$text-color: $black
body
  background-color: if($text-color == $black, $white, $black)

SCSS

$black: #000000;
$white: #ffffff;
$text-color: $black;
body {
  background-color: if($text-color == $black, $white, $black);
}

В нашем примере функция проверяет, установлена ли переменная «$text-color» в черный цвет. В этом случае (как и в примере выше) фон отображается белым. В любом другом случае CSS установит фон черным. Как видно из этого примера, ветви не обязательно подходят для проектирования всего веб-сайта. И директива, и функция в первую очередь полезны в миксинах или партиклах. Это позволяет шаблону лучше реагировать на то, что происходит в конечном дизайне для значений. И наоборот, если вы уже знаете, что цвет вашего текста черный, вам не нужно писать сложную ветвь, чтобы сделать фон белым.

Функции имеют свойство воспроизводить одно значение. Для более сложных требований используйте директиву «@if». Преимущество этих функций также в том, что они могут различать более двух случаев:

SASS

$black: #000000
$white: #ffffff
$lightgrey: #d3d3d3
$darkgrey: #545454
@mixin text-color($color)
@if ($color == $black)
background-color: $white
@else if ($color == $white)
background-color: $black
@else if ($color == $lightgrey)
background-color: $black
@else
background-color: $white
p
  @include text-color($lightgrey)

SCSS

$black: #000000;
$white: #ffffff;
$lightgrey: #d3d3d3;
$darkgrey: #545454;
@mixin text-color($color) {
@if ($color == $black) {
background-color: $white;
  }
@else if ($color == $white) {
background-color: $black;
  }
@else if ($color == $lightgrey) {
background-color: $black;
  }
@else {
background-color: $white;
  }
}
p {
  @include text-color($lightgrey);
}

Синтаксис директивы теоретически позволяет создать случай для каждого указанного значения. Убедитесь, что за начальным «@if» следует директива «@else», которую вы можете вызывать сколько угодно раз в сочетании с «if». Только последний «@else» остается свободным, вам нужно охватить все остальные случаи.

Комментарии

Также имеет смысл добавлять комментарии к исходному коду SASS. Благодаря содержательным комментариям документ останется понятным для вас и других в будущем. Особенно если вы хотите создать шаблоны для других пользователей, вы поможете им с помощью комментариев во время редактирования. Многие веб-дизайнеры также используют комментарии, чтобы более четко структурировать код. Большинство языков программирования и разметки имеют возможность вставлять в код текст, который игнорируется при компиляции или разборе. Этот текст представляет интерес только для человека, но не для компьютера.

Программисты и веб-дизайнеры также используют комментарии для пояснения своего кода: для этого вы помещаете код блока, который вам в данный момент не нужен, но для которого вы не хотите удалять исходный код, в соответствующие маркеры комментариев.

Каждый язык имеет свой метод комментирования текста. В SASS вы делаете это двумя разными способами. С одной стороны, вам доступен тот же вариант, что и в CSS: /* */. Используйте этот метод, чтобы закомментировать несколько строк напрямую. Часто можно встретить комментарии в CSS или SASS, где каждая строка в блоке комментариев начинается со звездочки. Однако это всего лишь условность, а не необходимость.

/* This is a comment. 
Everything between the corresponding markings 
will be included. */
Факт

При комментировании неважно, пишете ли вы код в SCSS или в «синтаксисе с отступами». Комментарии работают одинаково в обоих синтаксисах SASS.

В дополнение к методу, который мы уже знаем из CSS, в SASS можно комментировать отдельные строки с помощью //:

// These objectives are a commentary.
// So is this line. 

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

Оцените статью
cdelat.ru
Добавить комментарий