Карта Sass — это замечательный инструмент для организации вашего кода, минимизации дублирования и снижения уязвимости кода в целом. Они позволяют нам планировать и документировать наши проекты таким образом, чтобы это помогло в их общей архитектуре. Карты впервые появились в Sass 3.3 и изменили способ, которым разработчики структурируют свой код. В прошлом году Хьюго написал отличный пост об использовании карт Sass, на который я бы порекомендовал вам взглянуть.
Обратите внимание, что исходная карта Sass — это не то же самое, что карта Sass. Обе эти функции вышли в одном выпуске и иногда путают друг с другом.
Основное использование
Карты заключены в круглые скобки () и структурированы в пары key: value . Доступ к ним осуществляется с помощью map-get() и могут быть вложены друг в друга, что позволяет организовать сгруппированный контент.
$map-name: ( key-1: val-1, key-2: val-2, key-3: val-3 );
Итак, теперь, когда мы понимаем основную структуру, давайте углубимся в пять практических стратегий организации нашего кода, использующего преимущества карт!
1. Прозрачное наслоение
Давайте начнем с некоторого базового использования карты. Карты отлично подходят для организации вашего кода, и единственное место, в котором эта организация действительно полезна, — это работа со слоями элементов в вашем проекте (например, с z-индексом).
$layers: ( modal: 8, logo: 7, header: 6, footer: 5, sidebar: 4, caption: 3, image: 2, text: 1 );
Теперь мы можем ясно видеть, где все наши элементы будут лежать по отношению друг к другу. Затем мы можем получить доступ к этой карте с помощью следующего миксина:
@mixin layer($layer-name) { z-index: map-get($layers, $layer-name); };
И используйте его как таковой:
header { @include layer('header'); }
2. Управление цветом
Помните, когда я говорил, что карты отлично подходят для размещения и организации групп информации? Что ж, давайте применим это на практике с управлением цветом! Скажем, у нас есть цветовая палитра с заданными оттенками и оттенками (более светлые и темные вариации основного цвета).
$colors: ( 'red': ( tint: #f66, base: #c00, shade: #a00 ), 'orange': ( tint: #f94, base: #f50, shade: #f12 ), 'yellow': ( tint: #ffa, base: #ff0, shade: #ff5 ) );
Затем мы можем написать функцию для захвата цветов, которые мы хотим:
@function color($color-name, $tone: base) { @return map-get(map-get($colors, $color-name), $tone); }
Эта функция будет читать карту для нашего цвета и возвращать базу по умолчанию. Если мы введем значение для тона , мы получим оттенок цвета на карте. Так что background: color('yellow', 'tint') вернет более светлый оттенок. В качестве (очень разборчивого) примера,
// .scss h1 { background: color('yellow'); color: color('red', 'shade'); }
будет выглядеть так:
h1 { background: #ff0; color: #a00; }
Вы также можете начать маркировать оттенки по номеру или любым другим методом именования, который имеет смысл для вашего проекта.
3. Медиа-запросы
После небольшого опроса в Twitter я пришел к выводу о том, как лучше всего называть переменные точки останова. Старая идеология именования включала в себя определенные для устройства точки останова, такие как $phone , $desktop или $browser . Затем люди начали понимать, что это плохая стратегия — сеть изменчива, и никто не может предположить, какого «размера» будет телефон, поэтому они стали называть переменные « small , « medium и « large . Но это не имеет особого смысла.
Вместо этого мне нравится подход, заключающийся в наиболее заметном изменении макета и именовании ваших медиа-запросов на основе этого изменения. Например, если ваш макет меняется с одного столбца на два, назовите этот медиа-запрос mq--2-col , и если вашим основным изменением является центрирование текста, его можно назвать $mq--content-center .
Кроме того: когда я использую переменные в открытом виде, я предпочитаю color-- их внутри групп, т.е. color-- , mq-- или layer-- .
Тем не менее, чтобы управлять этими именами еще лучше, мы можем использовать карту.
$breakpoints: ( 1-col: 0px, left-align-text: 400px, 2-col: 680px, wide-header: 900px );
Вы видите, что здесь происходит? Как и схема, карта точек останова рассказывает о том, что происходит при расширении нашей страницы. С самой маленькой точки (это необязательно, я только включил это, чтобы доказать точку), у нас есть 1 столбец, центрированный текстовый макет. Когда он достигает 400 пикселей, текст выравнивается по левому краю. На 680px, мы разделены на 2 колонки. При 900px заголовок преобразуется в широкоформатную итерацию. Мы можем увидеть основные изменения макета только после чтения этой карты.
А теперь для миксина использовать карту:
@mixin smaller-than($point-name) { $width: map-get($breakpoints, $point-name); @media (max-width: $width) { @content; } } @mixin larger-than($point-name) { $width: map-get($breakpoints, $point-name); @media (min-width: $width) { @content; } } //usage .heading { font-size: 2em; @include smaller-than(left-text-align) { font-size: 1.5em; } @include larger-than(2-col) { font-size: 3em; } }
4. Доступные иконки
Если вы используете шрифт значков (например, IcoMoon ) для некоторых простых значков (например, значков социальных сетей) на своем сайте, код для этого может быть очень, очень уродливым. Вы можете сделать быструю карту значков, сопоставляя символы для значков с классом.
$icon-map: ( dribbble: '\e601', facebook: '\e607', instagram: '\e60c', twitter: '\e602', github: '\e603' );
Таким образом, вы можете быстро создавать классы и доступные значки, используя псевдоэлементы, используя что-то вроде этого:
@each $name, $visual in $icon-map { .icon--#{$name} { font-size: 0; &:before { font-size: 1rem; font-family: 'IcoMoon'; content: $visual; } } }
Это создает каждый значок как icon- :before , связанный с именем класса icon-
Поэтому, если у нас есть эта строка HTML: <div class="icon--facebook">facebook</div> , мы увидим только значок facebook, сопоставленный с символом \e607 .
5. Шаблон библиотеки
Другое замечательное использование карт — для создания библиотек шаблонов. Одна из самых больших претензий разработчиков к библиотекам шаблонов заключается в том, что они громоздки и полны тяжелого кода, не используемого человеком. Мы не хотим включать какой-либо код, который мы на самом деле не используем, чтобы сделать наш CSS более производительным.
Ну, карты могут это исправить! Поскольку карты являются просто структурой данных и не выводят никакого кода, пока мы не используем map-get для доступа к ним, они идеально подходят для этого!
Возьмите анимацию, например. Вы можете структурировать свои анимации на карте.
$animations: ( 'fade-in': ( 0%: ( opacity: 0 ), 100%: ( opacity: 1 ) ), 'fade-flicker': ( 0%: ( opacity: 1 ), 30%: ( opacity: 0 ), 60%: ( opacity: 1 ), 78%: ( opacity: 0 ), 100%: ( opacity: 1 ) ) );
Теперь, в отличие от ключевых кадров, ничего из этого не будет выводить код, пока мы не попросим его об этом. Поэтому в настоящее время в нашем проекте нет ключевых кадров. Чтобы смягчить это, давайте сделаем несколько миксинов и новую карту для анимации, которую мы включим в наш проект.
@mixin keyframe-gen($name) { @keyframes #{$name} { @each $position, $change in map-get($animations, $name) { #{$position} { @each $prop, $val in $change { #{$prop}: #{$val}; } } } } }; $included-animations: (); @mixin animate($name, $duration: 2s, $timing: ease-in) { $exists: index($included-animations, '#{$name}'); @if not $exists { @at-root { @include keyframe-gen($name); } $included-animations: append($included-animations, '#{$name}') !global; } animation: $name $duration $timing; };
Это делает выписывание анимации, которая будет включена в наш проект, а также настройку этой анимации для элемента. Нет повторений, и наш код остается верным для использования на основе вывода . Демонстрировать:
.fade-me-in { @include animate('fade-in'); } .also-fade-me-in { @include animate('fade-in', 3s); }
И наш единственный выход будет:
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-me-in { animation: "fade-in" 2s ease-in; } .also-fade-me-in { animation: "fade-in" 3s ease-in; }
Карты как контуры
Очевидно, карты Sass довольно хороши. Они представляют собой структуру данных, которую вы можете использовать, чтобы действительно помочь вам наметить (все каламбуры) ваш проект и аккуратно и упорядоченно отобразить сводку по его различным аспектам. Самым большим преимуществом является их организационная структура (которая служит схемой для различных аспектов вашего проекта), и карты никогда не выводят какой-либо код, пока его не вызовут. Так что попробуйте некоторые из этих техник и прокомментируйте свои идеи по использованию карт!