Копаться в Sass – Руководство

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

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

Рекомендуемое чтение: использование Bootstrap 3 с Sass

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

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

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

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

переменные

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

$ primary_color: # 666666;

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

.важный {
цвет: $ 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 {
    / * Правила для пунктов списка * /
}

{
    / * Правила для ссылок * /
}

}

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

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

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

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

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

Расширение будет знакомо, если вы работаете с объектно-ориентированными языками. Это лучше всего понять на примере, давайте создадим 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.

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

Примеси

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

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

@ смешение эффекта парения {
-webkit-transition: цвет фона 200мс;
-моз-переход: цвет фона 200мс;
o-переход: цвет фона 200 мс;
переход: цвет фона 200 мс;
}

{
@include эффект парения;
}

.button {
@include эффект парения;
}

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

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

{
@include эффект наведения (200 мс);
}

.button {
@include эффект наведения (300 мс);
}

Селекторные селекторы

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

.message {
размер шрифта: 1.1em;
обивка: 11px;
границы ширина: 1px;
стиль границы: твердый;
}

.message-danger {
@extend .message;
фон: # C20030;
цвет: #fff;
цвет границы: # A8002A;
}

.message-success {
@extend .message;
фон: # 7EA800;
цвет: #fff;
цвет границы: # 6B8F00;
}

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

% message {
размер шрифта: 1.1em;
обивка: 11px;
границы ширина: 1px;
стиль границы: твердый;
}

.message-danger {
кнопка @extend%;
фон: # C20030;
цвет: #fff;
цвет границы: # A8002A;
}

.message-success {
кнопка @extend%;
фон: # 7EA800;
цвет: #fff;
цвет границы: # 6D9700;
}

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

операции

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

.container {ширина: 100%; }

статья {
плыть налево;
ширина: 600px / 960px * 100%;
}

в стороне {
плавать: правильно;
ширина: 300px / 960px * 100%;
}

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

.container {
ширина: 100%;
}

статья {
плыть налево;
ширина: 62,5%;
}

в стороне {
плавать: правильно;
ширина: 31,25%;
}

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

$ primary: # 7EA800;

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

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

функции

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

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

$ primary: # 7EA800;

.message-success {
кнопка @extend%;
фон: $ основной;
цвет: #fff;
бордюрный цвет: темнее (основной $ 5);
}

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

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

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

обзор

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

Если вы заинтересованы в другом подобном препроцессоре CSS, я предлагаю взглянуть на МЕНЬШЕ (или ознакомьтесь с руководством для начинающих) – основной принцип почти такой же!