Простое и легкое руководство по пониманию Sass

Некоторое время назад Thoriq Firdaus написал отличную статью о начале работы с Sass, в которой показано, как установить и использовать этот очень полезный язык препроцессора CSS (вы знаете, вы можете проверить его, чтобы начать).

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

Инструменты торговли

Торик показал вам, как вы можете использовать Sass из командной строки, используя команду sass –watch.

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

Если вы просто хотите попробовать Sass ни за что не платя вы можете использовать терминал или приложение Scout, бесплатное кросс-платформенное многофункциональное приложение, которое не уступает премиальным аналогам.

Переменные

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

$primary_color: #666666; .button {цвет: $primary_color; } .important {цвет: $primary_color; }

Здесь это может показаться не таким уж полезным, но представьте, что у вас есть 3000 строк кода. Если ваша цветовая схема изменится, вам нужно будет заменить каждое значение цвета в CSS. С Sass вы можете просто изменить значение переменной $primary_color и покончим с этим.

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

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

Вложение

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

#header nav { /* Правила для области навигации */ } #header nav ul { /* Правила для меню */ } #header nav li { /* Правила для элементов списка */ } #header nav a { /* Правила для ссылок */ }

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

Вот как приведенный выше код мог бы выглядеть в Sass:

#header { nav { /* Правила для области навигации */ } ul { /* Правила для меню */ } li { /* Правила для элементов списка */ } a { /* Правила для ссылок */ } }

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

Одним из недостатков вложенности является то, что она может привести к ненужной конкретике. В приведенном выше примере я ссылался на ссылки с #header nav a. Вы также можете использовать #header nav ul li a, что, вероятно, будет слишком много.

В Sass намного проще быть очень конкретным, поскольку все, что вам нужно сделать, это вложить свои правила. Следующее гораздо менее читабельно и довольно специфично.

#header { nav { /* Правила для области навигации */ ul { /* Правила для меню */ li { /* Правила для элементов списка */ a { /* Правила для ссылок */ } } } } }

Расширение наборов правил

Расширение будет знакомо вам, если вы работали с объектно-ориентированными языками. Лучше всего это понять на примере, давайте создадим 3 кнопки, которые являются небольшими вариациями друг друга.

.button { дисплей: встроенный блок; цвет: #000; фон: #333; радиус границы: 4px; отступ: 8px 11px; } .button-primary { @extend .button; фон: #0091C2 } .button-small { @extend .button; размер шрифта: 0.9em; отступ: 3px 8px; }

Все классы .button-primary и .button-small расширяют класс .button, что означает, что они принимают все его свойства, а затем определяют свои собственные.

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

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

Миксины

Миксины — еще одна любимая функция пользователей препроцессоров. Миксины — это наборы правил многократного использования, идеально подходящие для правил конкретного поставщика или для сокращения длинных правил CSS.

Как насчет создания правила перехода для элементов наведения:

@mixing hover-effect { -webkit-transition: background-color 200 мс; -moz-переход: цвет фона 200 мс; -о-переход: цвет фона 200 мс; переход: цвет фона 200 мс; } a { @include hover-effect; } .button { @include hover-effect; }

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

@mixin hover-effect ($ speed) { -webkit-transition: background-color $ speed; -moz-transition: фоновый цвет $скорость; -o-переход: цвет фона $скорость; переход: цвет фона $скорость; } a { @include hover-effect (200 мс); } .button { @include hover-effect (300 мс); }

Селекторы-заполнители

Селекторы-заполнители были представлены в Sass 3.2 и решили проблему, которая могла привести к небольшому раздуванию сгенерированного кода CSS. Взгляните на этот код, который создает сообщения об ошибках:

.message {размер шрифта: 1.1em; отступ: 11 пикселей; ширина границы: 1px; стиль границы: сплошной; } .message-danger { @extend .message; фон: #C20030; цвет:#fff; цвет границы: #A8002A; } .message-success { @extend .message; фон: #7EA800; цвет:#fff; цвет границы: #6B8F00; }

Скорее всего, класс сообщения никогда не будет использоваться в нашем HTML: создан для расширения, а не используется как есть. Это приводит к небольшому раздуванию сгенерированного CSS. Чтобы сделать ваш код более эффективным, вы можете использовать селектор-заполнитель, который обозначен знаком процента:

%message { размер шрифта: 1.1em; отступ: 11 пикселей; ширина границы: 1px; стиль границы: сплошной; } .message-danger { @extend %button; фон: #C20030; цвет:#fff; цвет границы: #A8002A; } .message-success { @extend %button; фон: #7EA800; цвет:#fff; цвет границы: #6D9700; }

На этом этапе вам может быть интересно, в чем разница между расширениями и миксинами. Если вы используете заполнители, они ведут себя как миксин без параметров. Это правда, но вывод в CSS отличается. Разница в том, что миксины дублируют правила пока заполнители позаботятся о том, чтобы одни и те же правила разделяли селекторычто в итоге приводит к меньшему количеству CSS.

Операции

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

.контейнер {ширина: 100%; } статья { поплавок: слева; ширина: 600 пикселей / 960 пикселей * 100%; } в сторону { поплавок: вправо; ширина: 300 пикселей / 960 пикселей * 100%; }

В приведенном выше примере создается система сетки на основе 960 пикселей с минимальными трудностями. Он будет хорошо скомпилирован в следующий CSS:

.контейнер {ширина: 100%; } статья { поплавок: слева; ширина: 62,5%; } в сторону { поплавок: вправо; ширина: 31,25%; }

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

$основной: #7EA800; .message-success { @extend %button; фон: $основной; цвет:#fff; цвет границы: $primary – #111; }

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

Функции

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

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

$основной: #7EA800; .message-success { @extend %button; фон: $основной; цвет:#fff; цвет границы: затемнить($primary, 5); }

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

Функция ceil, как и в PHP, возвращает число, округленное до следующего целого числа. Это можно использовать при расчете ширины столбцов или если вы не хотите использовать много десятичных знаков в окончательном CSS.

.title {размер шрифта: ceil($heading_size * 1.3314); }

Отладка

Отладка — это обычный процесс устранения проблем. В таких языках программирования, как PHP и JavaScript, вы используете специальную встроенную функцию, например var_dump (PHP) или console.log (JavaScript). В этом случае Sass предоставляет специальные директивы @debug, @warn и @error, позволяющие легко выполнять отладку в Sass.

Ниже приведен пример вывода значения переменной с помощью метода @debug.

$ размер: 600 пикселей; div { $ ширина = $ размер / 960 пикселей * 100%; @debug “Ширина: #{$width}”; ширина: $ширина; }

При компиляции исходного кода Sass в CSS директива выводит содержимое на консоль или терминал.

style.scss:5 ОТЛАДКА: Ширина: 0,625 пикселей

Мы можем использовать @warn для отправки уведомления, например, если некоторые значения не проверены.

$основной цвет: #333; $вторичный цвет: #f3f3f3; div {$color-bg = затемнить($primary-color, 100%); $color-text = затемнить ($secondary-color, 100%); фон: $color-bg; цвет: $цвет-текст; @if $color-bg == $color-text { @warn “Цвет фона и текста – #{$color}!”; } }

Точно так же это приведет к сбросу содержимого на консоль или терминал при его компиляции в CSS. В приведенном выше примере мы показываем предупреждение, когда цвет фона и текста совпадают.

Предупреждение: цвет фона и текста равен #000000! Корневая таблица стилей style.scss 6:8

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

Ошибка: “Цвет фона и текста равен #000000!” ╷ 6 │ @error “Цвет фона и текста #{$color}!”; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^ ╵ style.scss Корневая таблица стилей 6:8

Обзор

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

Если вас интересует другой похожий препроцессор CSS, я предлагаю взглянуть на LESS (или ознакомиться с нашим руководством для начинающих) — основной принцип почти такой же!