Создание тем с помощью Sass: учебник по SCSS
Опубликовано: 2022-03-11Разработка таблиц стилей с помощью Sass, даже при использовании его самых основных функций, таких как вложенные свойства или переменные, экономит драгоценное время и облегчает жизнь разработчикам интерфейсов. Неудивительно, что препроцессоры CSS получили широкое распространение как де-факто способ создания стилей для веб-сайтов и приложений; мы просто не можем жить без них больше.
Когда дело доходит до тематики ; то есть изменение внешнего вида вашего веб-сайта при сохранении его макета, функции Sass, такие как миксины или функции, могут ощущаться как полет на самолете, а не прогулка! В этом руководстве по SCSS мы собираемся создать минимальную тему и использовать SCSS, чтобы придать нашему CSS-программированию некоторые сверхспособности.
Базовый подход к миксину
Допустим, у нас есть следующий макет:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Нас попросили создать для него несколько тем. Тема должна менять цвета для всех контейнеров (включая основной контейнер) и кнопки, и тема будет определяться классом в теле, или это может быть и «внешний» контейнер:
<body class="theme-1">Давайте создадим миксин с именем «themable», который будет содержать нашу цветовую схему в качестве параметров.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Затем используйте его для создания наших тем:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); На данный момент мы уже сэкономили много времени, но с этим подходом есть некоторые проблемы:
Темы обычно имеют множество различных свойств помимо цветов. Например, если бы мы хотели изменить тему Bootstrap, написание миксина по предыдущему «рецепту» было бы сложным в обслуживании, а код трудночитаемым. Кроме того, мы на самом деле не следуем лучшим практикам Sass — например, вводим шестнадцатеричные коды цветов непосредственно в миксин.
Создайте схему стилей с помощью Sass Maps
С помощью карт, которые в основном похожи на индексированные массивы ключей, мы можем построить более семантический, содержательный набор стилей для нашей темы, который будет легче поддерживать и понимать нашим коллегам-разработчикам. Можно было бы использовать и списки , но лично мне для этой цели больше подходят карты. У списков нет ключей, а ключи говорят сами за себя.
Карта для нашего нового подхода будет вложенной картой:
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Если мы хотим получить доступ к каждому разделу нашей схемы theme-1 и ее подкартам, мы используем директиву @each для циклического просмотра каждой из них:
@each $section, $map in $theme-1 $section вернет ключ текущего раздела, а $map вернет вложенную карту, соответствующую этому ключу.
Затем мы можем получить доступ к свойствам каждой карты, скажем, к свойству background (bg), используя функцию map-get :
map-get($map, bg)Наконец, объединив наш новый миксин на основе нашей структуры карты, мы можем создать столько тем, сколько захотим:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Обратите внимание, что мы также используем директиву @if , чтобы различать свойства разделов, не являющихся кнопками.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Таким образом, мы можем добавить разные свойства для некоторых разделов, чтобы создать определенные свойства или даже правила, или мы можем отличить ключ с одним значением от другого с помощью вложенной карты.
Наша тема также может состоять из множества карт, используемых несколькими миксинами, применяемыми в разных частях нашей таблицы стилей. Все зависит от сложности нашей базовой планировки и, конечно же, нашего личного подхода.
Дальнейшая оптимизация
Sass предлагает полезные встроенные функции, чтобы сэкономить нам еще больше работы; например, такие функции hsl, как lighten или darken , вычисляют, например, цвет кнопки при наведении на нее курсора.
Мы можем изменить код кнопки, чтобы сделать ее фон светлее при наведении, независимо от исходного цвета фона. Таким образом, нам не нужно добавлять еще один цвет для этого состояния.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Кроме того, с использованием модулей Sass наш код может быть еще более разборчивым и масштабируемым; каждая карта темы может содержаться в модуле, а затем импортироваться в нашу основную таблицу стилей.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Это потребует, чтобы модули были размещены в проекте как:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Если вам интересно узнать больше об использовании Sass для СУШКИ вашего CSS, коллега по Toptaler Джастин Бразо и энтузиаст Sass обсуждает именно это в своей блестящей статье Sass Mixins: Keep Your Stylesheets DRY .