Руководство для начинающих по Sass
В последние годы CSS превратился из написания простых наборов правил в мощный движок для создания прекрасного пользовательского опыта. Но по мере того, как проекты усложняются, как и CSS, который пишется, становится все труднее управлять и еще сложнее вносить изменения. В нативном CSS реализованы некоторые новые инструменты, такие как Grid и переменные, но препроцессоры CSS поднимают написание и управление CSS на следующий уровень.
Помимо написания гибких, повторно используемых наборов правил, препроцессоры CSS, такие как Sass, привносят мощную программную логику в CSS. Это верно - используя Sass, вы можете выполнять арифметические операции, писать функции ( @mixins ) и даже использовать управляющие структуры, такие как операторы if / else и циклы. В этой статье мы рассмотрим все способы написания программируемой логики в CSS. Синтаксис используется SCSS.
СОВЕТ: Если вы никогда ранее не использовали SCSS, я рекомендую ознакомиться с этим руководством, чтобы начать. Но не волнуйтесь! Если вы просто хотите увидеть , что SCSS может предложить, насколько логическая программа идет, вы можете сделать это в CodePen.io
Низко висящий фрукт: арифметические операторы
Самый простой способ начать программирование в SCSS - это заняться математикой. Вы можете выполнить пять арифметических операций:
- Дополнение с
+ - Вычитание с
- - Умножение с
* - Отдел с
/ - Получить остаток с
%
Это позволяет использовать математику для определения размера шрифта или даже создавать приятные градиенты в стилях. Вот пример:
$scale: 1.5;
$heading-base: 65px;
h1 {
font-size: $heading-base;
}
h2 {
font-size: $heading-base / $scale;
}Благодаря простому делителю размеры шрифта вашего заголовка теперь масштабируются относительно друг друга. А позже вы увидите, как сделать это еще лучше.
Стоит отметить, что если вы можете использовать эти операторы только на аналогичных устройствах. Таким образом, вы не можете умножить px и em например. Вы можете использовать операторы на шестнадцатеричных цветах, чтобы сделать несколько интересных цветов! Как правило, я стараюсь использовать только цифры без единиц для математики в SCSS, когда могу.
Но использование математики в CSS - это только начало. Давайте посмотрим на еще более мощные функции программирования SCSS.
@mixins: функции SCSS
Повторяемый код является важным аспектом любого языка программирования, и SCSS ничем не отличается. Используя @mixin , вы можете создать набор кода, который можно использовать повторно. Вот простой пример:
@mixin button() {
background: #880000;
color: #FFFFFF;
border-radius: 10px;
padding: 15px;
text-align: center;
}
a.button {
@include button;
}В этом миксине у нас есть набор общих правил для всех кнопок. Затем, когда мы объявляем что-то, что должно иметь эти правила, мы можем использовать директиву @include для импорта этого набора правил.Но все становится лучше. Вы также можете передавать переменные в mixins. Допустим, например, что вы хотите контролировать цвет кнопки:
@mixin button($color) {
background: $color;
color: #FFFFFF;
border-radius: 10px;
padding: 15px;
text-align: center;
}
a.button {
@include button(#008800);
}Наконец, если вы хотите изменить цвет по умолчанию, вы можете установить дополнительную переменную:
@mixin button($color: #880000) {...}Тогда, если вы отправите цвет, это используется. А если нет, используется значение #880000 по умолчанию .
Вы можете себе представить, что это достаточно мощный инструмент для определения, управления и изменения набора общих стилей. Если общий стиль для всех кнопок когда-либо изменится, вам нужно всего лишь изменить его в @mixin .
Благодаря возможности обобщать код и делать его повторяемым, есть еще одна вещь, которую вы можете добавить в свой набор инструментов: принятие решений.
Управление потоком: использование операторов if для вашего CSS
Некоторые утверждают, что программирование в значительной степени принимает конкретные решения на основе определенных условий. И хотя я оставлю философские обсуждения для другой статьи, это правда, что принятие решений открывает много возможностей в коде для управления потоком программы.
В SCSS речь идет не столько о реагировании на взаимодействия в реальном времени (для этого нужны медиа-запросы), а о возможности консолидировать и лучше управлять большими блоками наборов правил. Давайте посмотрим на пример:
@mixin shape($w, $h, $circle: false) {
width: $w;
height: $h;
background: #FF0000;
@if $circle {
border-radius: 50%;
}
}
.square {
@include shape(100px, 100px);
}
.circle {
@include shape(100px, 100px, true);
}В этом миксине мы создаем общую фигуру (ну, в действительности, квадрат), но благодаря этому @if мы можем использовать тот же самый миксин для создания круга. В более практичном примере, который используется для @else , у вас может быть миксин для управления базовыми стилями для «темного режима»:
@mixin theme-styles($dark-mode: false) {
@if $dark-mode {
//Set styles based on dark mode variables
} @else {
//Set styles based on light mode variables
}
}Таким образом, математика позволяет нам делать более точные вычисления для наших измерений, миксины позволяют нам обобщать наборы правил, чтобы сделать их более простыми для управления с высокого уровня, а операторы if/else позволяют нам сделать это управление еще одним шагом вперед, условно добавляя наборы правил и свойства по мере необходимости.
Но, возможно, самая большая экономия времени в логике программы SCSS - это циклы.
Повторение: создайте красивые стили с помощью циклов
Циклы позволяют вам повторять задачу, пока выполняется некоторое условие. В SCSS есть три типа циклов:
@for@while@each
Цикл for
Цикл @for представляет собой простой цикл подсчета. Вы можете выполнить задачу определенное количество раз. Отличным примером этого является легкое создание масштабированных размеров заголовков, которые мы рассматривали ранее:
$heading-size: 65px;
@for $i from 1 through 6 {
h#{$i} {
font-size: $base-size;
}
$heading-size: $heading-size / 1.25;
}Здесь у нас есть переменная, которую мы определили как $i (обычно используемая в циклах; вы можете думать о ней как об «индексе» или «интеграторе»), которая начинается с 1 и увеличивается до 6. Тогда у нас есть немного умного синтаксиса в SCSS, который позволяет нам использовать имена переменных в селекторах. Сначала мы используем знак хеша ( # ), чтобы указать, что мы начинаем имя переменной, затем заключаем переменную в фигурные скобки ( { } ).
Итак, здесь мы используем, $i чтобы определить каждый из 6 тегов заголовка. Затем мы устанавливаем размер шрифта на основе $heading-size переменной. В конце цикла мы делим эту переменную на 1,25 , уменьшаем ее, а затем делаем то же самое для следующего тега заголовка. Таким образом, отрендеренный CSS выглядит так:
h1 { font-size: 65px; }
h2 { font-size: 52px; }
h3 { font-size: 41.6px; }
h4 { font-size: 33.28px; }
h5 { font-size: 26.624px; }
h6 { font-size: 21.2992px; }Хорошие, математически масштабированные размеры заголовков!
Цикл while
Циклы @while похожи, но мы не отнесены ни к одному инкрементору. Мы можем сделать что-то вроде создания масштабированного градиента, основываясь на некотором множителе:
$gradient: 1;
$i: 1;
@while $gradient >= 0.1 {
main p:nth-child(#{$i}) {
background: rgba(0,0,240, $gradient);
min-height: 20px;
margin: 0;
}
$gradient: $gradient - 0.1;
$i: $i + 1;
}В этом примере мы нацеливаемся p на элемент main и снижаем голубой градиент для каждого дочернего элемента. . У нас есть 2 счетчика: тот $gradient , который контролирует непрозрачность, и $i , который рассчитывает на nth-child .
Это также можно использовать для создания набора классов градиента или создания приятного визуального эффекта для длинного контента.
Цикл each
Возможно, самый интересный цикл в SCSS - это @each цикл. Это позволит вам пройтись по спискам переменных (версия массивов SCSS). Вы можете сделать некоторые изящные вещи с правильной комбинацией информации. Допустим, вы хотите серию предупреждений. Вы можете просмотреть массив цветов следующим образом:
$alerts: red, blue, green, yellow;
@each $alert in $alerts {
.alert-#{$alert} {
background: $alert;
color: #FFFFFF;
padding: 10px;
text-align: center;
}
}Это говорит, что для каждой записи в $alerts списке, создайте класс с именем записи и установите запись в качестве цвета фона.
Вы можете сделать этот шаг еще дальше с помощью пар карт – key → value в списках. Если вы хотите больше описательных имен, вы можете сделать это:
$alerts: ("error" : red,
"neutral" : blue,
"good" : green,
"warning" : yellow
);
@each $name, $color in $alerts {
.alert-#{$name} {
background: $color;
color: #FFFFFF;
padding: 10px;
text-align: center;
}
}Это эффективный способ быстро работать с большими наборами повторяющихся CSS. Вы можете представить собственный шрифт значка, который вы хотите использовать, где у вас есть карта с названием значка и значение Юникода для глифа.
Идите вперед и программируйте CSS!
С этим вы готовы начать кодировать свой собственный SCSS. Теперь у вас есть синтаксис, необходимый для выполнения математических операций if и циклов для ваших стилей. Для чего вы собираетесь использовать эту вновь обретенную силу? Дайте нам знать об этом в комментариях!
Ваш интерфейс загружает процессор ваших пользователей?
Поскольку веб-интерфейсы становятся все более сложными, жадные до ресурсов функции все больше требуют от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей, попробуйте LogRocket.
LogRocket похож на видеорегистратор для веб-приложений, записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать о ключевых показателях производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически отображать все ошибки.
