Простое и легкое руководство для понимания Sass
Некоторое время назад Thoriq Firdaus написал отличную статью о начале работы с Sass, в которой рассказывалось, как установить и использовать этот очень полезный язык препроцессора CSS (возможно, вы захотите проверить его, знаете, для начала).
В этой статье я подумал, что дам вам немного больше понимания того, что вы можете делать с Sass, и как разработчики используют его каждый день для создания лучшего и более модульного кода CSS. Перейдите к нужному разделу:
- Инструменты торговли
- переменные
- гнездование
- Расширение наборов правил
- Примеси
- Селекторные селекторы
- операции
- функции
Инструменты торговли
Торик показал вам, как вы можете использовать Sass из командной строки, используя sass - часы команда.
Если вы предпочитаете инструменты с графическим интерфейсом, вы можете использовать мое любимое приложение, Codekit, инструмент веб-разработчика для компиляции Sass, конкатенации, автоопределения и многое другое. Prepros - еще одно очень мощное приложение, которое можно использовать во всех системах. Оба платные приложения но это того стоит, если вы будете использовать их в долгосрочной перспективе.
Если вы просто хотите попробовать Sass не платя ни за что Вы можете использовать терминал, или Koala (наш обзор), бесплатное кроссплатформенное многофункциональное приложение, которое может противостоять конкурентам премиум-класса..
переменные
Одна из первых вещей, которые вам понадобятся, - это переменные. Если вы пришли из PHP или другого аналогичного языка программирования, это будет для вас второй натурой. Переменные для хранение фрагментов многоразовой информации, как значение цвета, например:
$ primary_color: # 666666; .button color: $ primary_color; .important 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 / * Правила для элементов списка * / a / * Правила для ссылок * /
Вложение чрезвычайно полезно, потому что оно делает таблицы стилей (много) более читабельными. Используя вложение вместе с правильными отступами, вы можете достичь легко читаемые структуры кода, даже если у вас есть достаточное количество кода.
Недостатком вложенности является то, что он может привести к ненужной специфике. В приведенном выше примере я ссылался на ссылки с #header nav a. Вы также можете использовать #header nav ul li a a что, вероятно, будет слишком много.
В Sass гораздо проще быть очень конкретным, так как все, что вам нужно сделать, это внедрить ваши правила. Нижеследующее гораздо менее читабельно и довольно конкретно.
#header nav / * Правила для области навигации * / ul / * Правила для меню * / li / * Правила для элементов списка * / a / * Правила для ссылок * /
Расширение наборов правил
Расширение будет знакомо, если вы работаете с объектно-ориентированными языками. Это лучше всего понять на примере, давайте создадим 3 кнопки, которые являются небольшими вариациями друг друга.
.кнопка дисплей: встроенный блок; цвет: # 000; фон: # 333; границы радиус: 4px; отступы: 8px 11px; .button-primary @extend .button; background: # 0091C2 .button-small @extend .button; размер шрифта: 0.9em; обивка: 3px 8px;
.Кнопка первичной а также .Кнопка-маленькая классы все расширяют .кнопка класс, который означает, что они принимают на себя все его свойства, а затем определяют свои собственные.
Это очень полезно во многих ситуациях, когда могут использоваться варианты элемента. Сообщения (предупреждение / успех / ошибка), кнопки (цвета, размеры), типы меню и т. Д. Могут использовать расширенные функциональные возможности для большой эффективности CSS.
Одно предостережение о том, что расширяет то, что они не будут работать в медиа-запросах как и следовало ожидать. Это немного сложнее, но вы можете прочитать все об этом поведении в Понимании селекторов-заполнителей - селекторы-заполнители - это особый вид расширения, о котором мы скоро поговорим.
Примеси
Mixins - еще одна любимая особенность пользователей препроцессора. Миксины - это повторно используемые наборы правил - идеально подходят для правил конкретного поставщика или для сокращения длинных правил CSS.
Как насчет создания правила перехода для элементов наведения:
@mixing hover-effect -webkit-transition: background-color 200ms; -моз-переход: цвет фона 200мс; o-переход: цвет фона 200 мс; переход: цвет фона 200 мс; @include эффект наведения; .button @include hover-effect;
Миксины также позволяют использовать переменные для определить значения в миксине. Мы могли бы переписать пример выше, чтобы дать нам контроль над точным временем перехода. Мы можем хотеть, чтобы кнопки переходили немного медленнее, например.
@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. Посмотрите на этот код, который создает сообщения об ошибках:
.сообщение font-size: 1.1em; обивка: 11px; границы ширина: 1px; стиль границы: твердый; .message-danger @extend .message; фон: # C20030; цвет: #fff; цвет границы: # A8002A; .message-success @extend .message; фон: # 7EA800; цвет: #fff; цвет границы: # 6B8F00;
Скорее всего, класс сообщений никогда не будет использоваться в нашем HTML: он был создан для расширения, не используется как есть. Это вызывает небольшое раздувание в вашем сгенерированном CSS. Чтобы сделать ваш код более эффективным, вы можете использовать селектор-заполнитель, который обозначается знаком процента:
% message font-size: 1.1em; обивка: 11px; границы ширина: 1px; стиль границы: твердый; .message-danger @extend% button; фон: # C20030; цвет: #fff; цвет границы: # A8002A; .message-success @extend% button; фон: # 7EA800; цвет: #fff; цвет границы: # 6D9700;
На этом этапе вам может быть интересно, в чем разница между расширениями и миксинами. Если вы используете заполнители, они ведут себя как миксин без параметров. Это правда, но вывод в CSS отличается. Разница в том, что Mixins дублировать правила в то время как заполнители будут следить, чтобы одни и те же правила использовали селекторы, в результате меньше CSS в конце.
операции
Здесь трудно устоять перед каламбуром, но я пока воздержусь от медицинских шуток. Операторы позволяют вам сделать некоторую математику в вашем коде CSS и могут быть чертовски полезными. Пример в руководстве Sass идеально подходит для демонстрации этого:
.контейнер ширина: 100%; article float: left; ширина: 600px / 960px * 100%; в сторону float: right; ширина: 300px / 960px * 100%;
В приведенном выше примере создается сетка на основе 960 пикселей с минимальными трудностями. Он будет хорошо скомпилирован в следующий CSS:
.контейнер ширина: 100%; article float: left; ширина: 62,5%; в сторону float: right; ширина: 31,25%;
Одно большое применение, которое я нахожу для операций, - это смешивание цветов. Если вы посмотрите на сообщение об успехе Sass выше, не ясно, что цвет фона и границы имеют какое-то отношение. Вычитая оттенок серого, мы можем затемнить цвет, делая отношения видимыми:
$ primary: # 7EA800; .message-success @extend% button; фон: $ основной; цвет: #fff; цвет границы: $ основной - # 111;
Чем светлее вычтенный цвет, тем темнее будет результирующий оттенок. Чем светлее добавленный цвет, тем светлее получается оттенок.
функции
Существует множество функций: числовые функции, строковые функции, функции списка, функции цвета и многое другое. Взгляните на длинный список в документации для разработчиков. Я посмотрю на пару здесь, чтобы показать вам, как они работают.
светлеть а также темнеть Функция может быть использована для изменения яркости цвета. Это лучше, чем вычитать оттенки, это делает все еще более модульным и очевидным. Взгляните на наш предыдущий пример, используя функцию затемнения.
$ primary: # 7EA800; .message-success @extend% button; фон: $ основной; цвет: #fff; цвет границы: темнее (основной $ 5);
Второй аргумент функции - это процент требуемого затемнения. Все функции имеют параметры; взгляните на документацию, чтобы увидеть, что они есть! Вот несколько других самоочевидных цветовых функций: обесцветить, насыщать, инвертировать, полутоновой.
перекрывать Функция, как и в PHP, возвращает число, округленное до следующего целого числа. Это может быть использовано при расчете ширины столбца или если вы не хотите использовать много десятичных знаков в окончательном CSS.
.title font-size: ceil ($ heading_size * 1.3314);
обзор
Функции в Sass дают нам большие возможности для написания лучшего CSS с меньшими усилиями. Правильное использование миксов, расширений, функций и переменных сделает наши таблицы стилей более понятными, удобочитаемыми и удобными для написания..
Если вы заинтересованы в другом подобном препроцессоре CSS, я предлагаю взглянуть на LESS (или проверить наше руководство для начинающих) - основной принцип почти такой же!
