Полезные сниппеты для Sass
Огромное количество разработчиков использует Sass из-за возможности использовать примеси и функции, что позволяет автоматизировать многие повторяющиеся процессы и значительно ускорить написание кода. По какой-то причине, часто встречаются ситуации, в которых разработчики создают невероятно сложные системы для решения простых задач, таких, как управление параметрами шрифта или настройки цветовой схемы. Обычно такие системы крайне сложно устанавливать и использовать. Сегодня мы попробуем облегчить жизнь разработчикам, представив ряд полезных сниппетов для Sass, которые упростят вам работу с цветовыми схемами, стеками шрифтов и медиа-запросами.
Цвета
Цветовая гамма сайта очень важна. Как правило, кодеры используют огромное количество переменных \"переменных\", чтобы реализовать цветовую схему. Некоторые считают это эффективным, но у этого подхода существует ряд недостатков. Скажем, у нас есть пять цветов: $red, $red-yellow, $yellow, $tan, $brown . Что делать, если есть несколько красных? $red-2? Что делать, если есть пять различных красных? Вместо этого, попробуйте использовать функцию colors. Цвет, как правило, имеет 3 параметра: цвет, оттенок и прозрачность (RGBA).
$color-stack:
(group: orange, id: normal, color: #e67835),
(group: orange, id: pale, color: #f8a878),
(group: orange, id: dark, color: #ad490c),
(group: blue, id: normal, color: #426682);
// Color Function
@function color($group, $shade:normal, $transparency:1){
@each $color in $color-stack{
$c-group: map-get($color, group);
$c-shade: map-get($color, id);
@if($group == map-get($color, group) and $shade == map-get($color, id)){
@return rgba(map-get($color, color), $transparency);
}
}
}Немного подробнее о том, что здесь происходит. У нас есть карта под названием $color-stack. Это единственное, что мы будем обновлять, чтобы добавить или удалить цвет. Карта имеет три идентификатора: группа, id, цвет.
- Группа - группа цветов, имеющая общее название;
- ID - это уникальный идентификатор цвета, который не должен повторяться в одной группе;
- Цвет, собственно, определяет основной цвет.
- ID - это уникальный идентификатор цвета, который не должен повторяться в одной группе;
После того, как функция вызывается, она анализирует $color-stack до тех пор, пока не найдет указанные идентификаторы группы и id, после чего она отрегулирует прозрачность указанного цвета до заданной величины.
Простой пример
body{
color: color(blue, normal,.8);
}
p{
color: color(orange);
}
blockquote{
color: color(blue);
background: color(orange, pale,.4);
border-color: color(orange, dark);
}Компилируется в:
body {
color: rgba(66, 102, 130, 0.8);
}
p {
color: #e67835;
}
blockquote {
color: #426682;
background: rgba(248, 168, 120, 0.4);
border-color: #ad490c;
}Стеки шрифтов
Стеки шрифтов одна из тех проблем, которые часто решаются с помощью переменных. Странные проблемы могут возникнуть при использовании продуктов сторонних разработчиков. Например, fonts.com странно обрабатывает их стек по умолчанию. Как странно? Ну, скажем, вы хотите использовать все семейство Brandon Grotesque. Для получения шрифта с параметром weight:200 вам нужно font-family:’Brandon Grot W01 Light’; для weight:700 font-family:’Brandon Grot W01 Bold’;. На первый взгляд это выглядит несложно, но что если количество вызовов станет действительно большим? Попробуйте использовать это решение:
$font-stack:
(group: brandon, id: light, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: normal),
(group: brandon, id: light-italic, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: italic),
(group: brandon, id: regular, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: normal),
(group: brandon, id: regular-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
(group: brandon, id: bold, font: ('Brandon Grot W01 Black', san-serif), weight: 700, style: normal),
(group: brandon, id: bold-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
(group: clarendon, id: regular, font: ('Clarendon LT W01', serif), weight: 200, style: normal),
(group: code, id: regular, font: (monospace), weight: 400, style: normal);
// Breakpoint Mixin
@mixin font($group, $id:regular){
@each $font in $font-stack{
@if($group == map-get($font, group) and $id == map-get($font, id)){
font-family: map-get($font, font);
font-weight: map-get($font, weight);
font-style: map-get($font, style);
}
}
}Этот код очень похож на функцию цвета. Существует 5 значений, необходимых для эффективной работы этой карты:
- Группа. Общее название для группы шрифтов.
- ID. Уникальный идентификатор шрифта, который не должен повторяться в группе.
- Шрифт. Текущий шрифт. Указывается в качестве стека в (map) или переменной!
- Вес. Вес шрифта, который вам необходим.
- Стиль. Стиль шрифта, который вам необходим.
- ID. Уникальный идентификатор шрифта, который не должен повторяться в группе.
После того, как у вас есть все, что необходимо, $font-stack: ищет совпадения с названием группы и ID. После чего возвращает такие свойства, как семейство шрифтов, начертание шрифта и стиль шрифта.
h1{
@include font(brandon, light-italic);
}
p{
@include font(brandon);
}
p i{
@include font(brandon, regular-italic);
}
p b{
@include font(brandon, bold);
}
blockquote{
@include font(clarendon);
}
code{
@include font(code);
}Превращается в:
h1 {
font-family: \"Brandon Grot W01 Light\", san-serif;
font-weight: 200;
font-style: italic;
}
p {
font-family: \"Brandon Grot W01-Regular\", san-serif;
font-weight: 400;
font-style: normal;
}
p i {
font-family: \"Brandon Grot W01-Regular\", san-serif;
font-weight: 400;
font-style: italic;
}
p b {
font-family: \"Brandon Grot W01 Black\", san-serif;
font-weight: 700;
font-style: normal;
}
blockquote {
font-family: \"Clarendon LT W01\", serif;
font-weight: 200;
font-style: normal;
}
code {
font-family: monospace;
font-weight: 400;
font-style: normal;
}Медиа запросы
Последний сниппет - это решение для работы с медиа-запросами:
$media-stack:
(group: tablet, id: general, rule: \"only screen and (min-device-width: 700px)\"),
(group: small, id: general, rule: \"only screen and(min-device-width: 1100px)\"),
(group: small, id: inbetween, rule: \"only screen and(min-device-width: 1100px) and (max-device-width: 1400px)\"),
(group: large, id: general, rule: \"only screen and(min-device-width: 1400px)\"),
(group: print, id: general, rule: \"only print\");
@mixin media($group, $id: general){
@each $media in $media-stack{
@if($group == map-get($media, group) and $id == map-get($media, id)){
$rule: map-get($media, rule);
@media #{$rule} {@content}
}
}
}Это решение похоже на два предыдущих и имеет три идентификатора:
- Группа: Это название группы запросов, которое может быть одинаковым для нескольких из них;
- ID. Уникальный запрос идентификатора, который не должен повторяться в группе;
- Правило. Это правило, которые вы хотите использовать для конкретного запроса.
- ID. Уникальный запрос идентификатора, который не должен повторяться в группе;
Есть два способа использования этой примеси: либо использовать в качестве вложенного кода, либо вызывать из внешнего файла. Мы рекомендуем использовать первый вариант, который позволяет уменьшить размер и количество вызываемых CSS-файлов.
h1{
color: #333;
@include media(tablet){
font-size: 1rem;
};
@include media(small, inbetween){
font-size: 1.2rem;
};
@include media(small){
color: #000;
};
}Компилируется в:
h1 {
color: #333;
}
@media only screen and (min-device-width: 700px) {
h1 {
font-size: 1rem;
}
}
@media only screen and (min-device-width: 1100px) and (max-device-width: 1400px) {
h1 {
font-size: 1.2rem;
}
}
@media only screen and (min-device-width: 1100px) {
h1 {
color: #000;
}
}Зачастую контент определяет наши брейкпойнты. Для того чтобы реализовать этот вариант, внесем несколько изменений в нашу систему.
$media-stack:
(group: tablet, id: general, rule: \"only screen and (min-device-width: 700px)\"),
(group: small, id: general, rule: \"only screen and(min-device-width: 1100px)\"),
(group: small, id: inbetween, rule: \"only screen and(min-device-width: 1100px) and (max-device-width: 1400px)\"),
(group: large, id: general, rule: \"only screen and(min-device-width: 1400px)\"),
(group: print, id: general, rule: \"only print\"),
(group: custom, id: screen, rule: \"only screen and\");
@mixin media($group, $id: general, $customRule: \"\"){
@each $media in $media-stack{
@if($group == map-get($media, group) and $id == map-get($media, id)){
$rule: map-get($media, rule);
@media #{$rule} #{$customRule} {@content}
}
}
}Мы добавили новую карту с идентификатором group:custom. Это основа пользовательских медиа-запросов! Вы также найдете новый параметр под названием $ customRule, который используется для того, чтобы добавить правило. Итак, давайте представим, что вы хотите настроить таргетинг устройства под ширину 360 и сделать их H1 синими:
h1{
color: #333;
@include media(tablet){
font-size: 1rem;
};
@include media(small, inbetween){
font-size: 1.2rem;
};
@include media(small){
color: #000;
};
@include media(custom, screen, \" (max-device-width: 360px)\"){
color: blue;
};
}На выходе получаем:
h1 {
color: #333;
}
@media only screen and (min-device-width: 700px) {
h1 {
font-size: 1rem;
}
}
@media only screen and (min-device-width: 1100px) and (max-device-width: 1400px) {
h1 {
font-size: 1.2rem;
}
}
@media only screen and (min-device-width: 1100px) {
h1 {
color: #000;
}
}
@media only screen and (max-device-width: 360px) {
h1 {
color: blue;
}
}Но зачем останавливаться? Вы можете использовать $ customRule для каждого варианта:
h1{
color: #333;
@include media(tablet, general, \" and (min-device-pixel-ratio: 2)\"){
font-size: 1rem;
};
@include media(small, inbetween){
font-size: 1.2rem;
};
@include media(small){
color: #000;
};
@include media(custom, screen, \"(max-device-width: 360px)\"){
color: blue;
};
}