<section id="description">
Одна из особенностей Sass, которая отличается от CSS, заключается в использовании переменных. Они объявляются и устанавливаются для хранения данных, похоже на JavaScript. В JavaScript переменные определяются с использованием слов <code>let</code> и <code>const</code> . В Sass переменные начинаются с <code>$</code> за которым следует имя переменной. Вот несколько примеров: <blockquote> $ main-fonts: Arial, sans-serif; $ headings-color: green; // Для использования переменных: h1 { font-family: $ main-fonts; цвет: $ headings-color; } </blockquote> Одним из примеров, полезного применения переменных, когда необходимо, чтобы несколько элементов должны быть одного цвета. Если этот цвет меняется, единственным местом для редактирования кода является значение переменной.</section>

Store Data with Sass Variables

<section id="description">
Sass допускает <code>nesting</code> правил CSS, что является полезным способом организации таблицы стилей. Как правило, каждый элемент нацелен на другую строку для его стилизации, например: <blockquote> nav { background-color: red; } nav ul { list-style: none; } nav ul li { display: inline-block; } </blockquote> Для большого проекта в файле CSS будет много строк и правил. Вот где <code>nesting</code> может помочь организовать ваш код, поместив правила дочернего стиля в соответствующие родительские элементы: <blockquote> nav { background-color: red; ul { list-style: none; li { display: inline-block; } } } </blockquote>
</section>

Nest CSS with Sass

<section id="description">
В Sass <code>mixin</code> представляет собой группу объявлений CSS, которые можно использовать повторно в таблице стилей. Новые функции CSS требуют времени, прежде чем они будут полностью приняты и готовы к использованию во всех браузерах. По мере добавления функций в браузеры, правила CSS, использующие их, могут потребоваться префиксы поставщиков. Рассмотрим «box-shadow»: <blockquote> 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; } </blockquote> Очень много нужно переписать это правило для всех элементов, у которых есть <code>box-shadow</code> , или изменить каждое значение для проверки различных эффектов. <code>Mixins</code> похожи на функции CSS. Вот как написать один: <blockquote> @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; } </blockquote> Определение начинается с <code>@mixin</code> за которым следует пользовательское имя. Параметры ( <code>$x</code> , <code>$y</code> , <code>$blur</code> и <code>$c</code> в приведенном выше примере) являются необязательными. Теперь, когда требуется правило <code>box-shadow</code> , только одна строка, вызывающая <code>mixin</code> заменяет необходимость вводить все префиксы поставщика. <code>mixin</code> вызывается с директивой <code>@include</code> : <blockquote> div { @include box-shadow (0px, 0px, 4px, #fff); } </blockquote>
</section>

Create Reusable CSS with Mixins

<section id="description">
Директива <code>@if</code> в Sass полезна для проверки конкретного случая - она ​​работает так же, как и оператор <code>if</code> в JavaScript. <blockquote> @mixin make-bold ($ bool) { @if $ bool == true { font-weight: bold; } } </blockquote> И так же, как в JavaScript, <code>@else if</code> и <code>@else</code> test для получения дополнительных условий: <blockquote> @mixin text-effect ($ val) { @if $ val == опасность { красный цвет; } @else, если $ val == alert { цвет: желтый; } @else, если $ val == success { цвет: зеленый; } @else { черный цвет; } } </blockquote>
</section>

Use @if and @else to Add Logic To Your Styles

<section id="description">
Директива <code>@for</code> добавляет стили в цикле, очень похожие <code>for</code> цикл <code>for</code> в JavaScript. <code>@for</code> используется двумя способами: «начать с конца» или «начать с конца». Основное различие заключается в том, что «начало к концу» исключает конечный номер, а «начало через конец» включает конечный номер. Вот начало через конец , например: <blockquote> @for $ i от 1 до 12 { .col - # {$ i} {width: 100% / 12 * $ i; } } </blockquote> Часть <code>#{$i}</code> - это синтаксис для объединения переменной ( <code>i</code> ) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так: <blockquote> .col-1 { ширина: 8,33333%; } .col-2 { ширина: 16,66667%; } ... .col-12 { ширина: 100%; } </blockquote> Это мощный способ создания сетки. Теперь у вас есть двенадцать вариантов ширины столбцов, доступных как классы CSS.</section>

Use @for to Create a Sass Loop

<section id="description">
Последняя задача показала, как директива <code>@for</code> использует начальное и конечное значение для циклического цикла определенное количество раз. Sass также предлагает директиву <code>@each</code> которая <code>@each</code> каждый элемент в списке или карте. На каждой итерации переменная присваивается текущему значению из списка или карты. <blockquote> @each $ color в синем, красном, зеленом { . # {$ color} -text {color: $ color;} } </blockquote> Карта имеет несколько иной синтаксис. Вот пример: <blockquote> $ colors: (color1: blue, color2: red, color3: green); @each $ key, $ color в $ colors { . # {$ color} -text {color: $ color;} } </blockquote> Обратите внимание, что <code>$key</code> переменная <code>$key</code> необходима для ссылки на ключи на карте. В противном случае, скомпилированный CSS будет иметь <code>color1</code> , <code>color2</code> ... в нем. Оба приведенных выше примера кода преобразуются в следующий CSS: <blockquote> .blue-text { цвет синий; } .red-text { красный цвет; } .green-text { цвет: зеленый; } </blockquote>
</section>

Use @each to Map Over Items in a List

<section id="description">
<code>@while</code> директива является вариантом с аналогичной функциональностью на JavaScript в <code>while</code> цикл. Он создает правила CSS до тех пор, пока не будет выполнено условие. Задача <code>@for</code> привела пример создания простой сетки. Это также может работать с <code>@while</code> . <blockquote> $ x: 1; @while $ x &#x3C;13 { .col - # {$ x} {width: 100% / 12 * $ x;} $ x: $ x + 1; } </blockquote> Сначала определите переменную <code>$x</code> и установите ее в 1. Затем используйте директиву <code>@while</code> для создания сетки, а <code>$x</code> меньше 13. После установки правила CSS для <code>width</code> <code>$x</code> увеличивается на 1, чтобы избежать бесконечная петля.</section>

Apply a Style Until a Condition is Met with @while

<section id="description">
<code>Partials</code> в Sass - это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ группировать аналогичный код в модуль, чтобы поддерживать его. Имена <code>partials</code> начинаются с символа подчеркивания ( <code>_</code> ), который сообщает Sass, что это небольшой сегмент CSS, а не для преобразования его в файл CSS. Кроме того, файлы Sass заканчиваются расширением <code>.scss</code> . Чтобы привести код в <code>partial</code> файле в другой файл Sass, используйте директиву <code>@import</code> . Например, если все ваши <code>mixins</code> сохранены в <code>partial</code> имени «_mixins.scss», и они необходимы в файле «main.scss», так их можно использовать в основном файле: <blockquote> // В файле main.scss @import 'mixins' </blockquote> Обратите внимание, что подчеркивание не требуется в операторе <code>import</code> - Сасс понимает, что он является <code>partial</code> . После <code>partial</code> импортирования в файл доступны все переменные, <code>mixins</code> и другой код.</section>

Split Your Styles into Smaller Chunks with Partials

<section id="description">
У Sass есть функция, называемая <code>extend</code> которая упрощает заимствование правил CSS из одного элемента и построение на них в другом. Например, <code>.panel</code> блок правил CSS <code>.panel</code> класс <code>.panel</code> . Он имеет <code>background-color</code> , <code>height</code> и <code>border</code> . <blockquote> .panel { background-color: red; высота: 70px; граница: 2px сплошной зеленый; } </blockquote> Теперь вам нужна другая панель под названием <code>.big-panel</code> . Он имеет те же базовые свойства, что и <code>.panel</code> , но также требует <code>width</code> и <code>font-size</code> . Можно скопировать и вставить исходные правила CSS из <code>.panel</code> , но код становится повторяющимся, когда вы добавляете больше типов панелей. Директива <code>extend</code> - это простой способ повторного использования правил, написанных для одного элемента, а затем добавить другое для другого: <blockquote> .big панели { @extend .panel; ширина: 150 пикселей; font-size: 2em; } </blockquote> <code>.big-panel</code> будет иметь те же свойства, что и <code>.panel</code> в дополнение к новым стилям.</section>