Sass избавляет от необходимости писать повторяющийся код, когда дело доходит до наших таблиц стилей, но вы уже знали, что иначе вы не будете читать это далеко. Я хочу показать вам хороший, умный способ написания сокращенных свойств без необходимости запоминать порядок значений для CSS, таких как animation
font
Прежде чем вы начнете : Поскольку я использую карты Sass, было бы неплохо освоиться с ними. Так получилось, что есть как минимум две замечательные статьи.
Никогда не запоминайте, что вы можете посмотреть в книге
Название, которое вы только что прочитали, является знаменитой цитатой Альберта Эйнштейна — и при этом хорошей. Мое предположение заключается в том, что я не единственный разработчик в мире, задающий себе вопрос: «Теперь … direction
fill-mode
Или это наоборот?»
Следующие настройки могут быть не для всех, но я хочу, чтобы вы приняли к сведению подход. Вы можете изменить это, чтобы работать так, как вы хотите. Помните … небо это предел.
пререкаться
@function sh-setup($config) {
@return zip(map-values($config)...);
}
$animation_config: (
name: none,
duration: 0s,
timing: ease,
delay: 0s,
iteration: 1, // infinite
direction: normal, // reverse, alternate, alternate-reverse
fill-mode: none, // forwards, backwards, both
play-state: running
);
.object {
animation: sh-setup($animation_config);
}
CSS
.object {
animation: none 0s ease 0s 1 normal none running;
}
Что произошло?
Наша функция sh-setup()
config
map-values()
zip()
Эта функция берет список через запятую, возвращенный функцией map-values()
список в строку, разделенную пробелом! Вау! Daaaaaannnnnggggg !!!
Итак … это круто и все, но почему три полных остановки (или многоточие) в конце значений map-values()
Итак, многоточие говорит map-values()
zip()
none, 0s, ease, 0s, 1, normal, none, running
Если бы мы не добавили ...
zip()
Он видит вывод выше как одну строку . ...
Мы, разработчики, должны сказать Sass, что все в порядке, разбить строку на отдельные случаи, чтобы мы получили :
none 0s ease 0s 1 normal none running
Идти дальше
Теперь, когда мы сделали это с animation
font
Свойство font
весь оператор не выполняется . Если вы не помните порядок ( ха-ха, кто знает ), то позвольте мне освежить вашу память:
-
font-style
-
font-variant
-
font-weight
-
font-size
-
line-height
-
font-family
Теперь давайте настроим это так, как мы хотим. Обратите внимание, что мы не касаемся нашей функции sh-setup()
@function sh-setup($config) {
@return zip(map-values($config)...);
}
$fonts: "'Proxima Nova', Arial, sans-serif";
$font_config: (
font-style: normal,
font-variant: normal,
font-weight: normal,
font-measurements: 100%/1.5,
font-family: unquote($fonts)
);
body {
font: sh-setup($font_config);
}
CSS
font: normal normal normal 100%/1.5 'Proxima Nova', Arial, sans-serif;
Я поместил font-size
line-height
/
font-size
line height
Функция unquote()
font-family
Эта функция помогает сохранить одинарные кавычки, рекомендованные W3C для имен семейств шрифтов, содержащих пробелы, чтобы избежать ошибок при экранировании. Мы также поддерживаем запятые для нескольких имен font-family
Другой способ, которым мы могли бы сделать предыдущий подход, — это определить другую карту для хранения наших семейств шрифтов и при этом использовать ту же функцию, которую мы использовали все время.
@function sh-setup($config) {
@return zip(map-values($config)...);
}
$fonts: (
primary-font: "'Proxima Nova'", // font family names containing whitespace write like this"'Font Name'"
font-fallback1: Helvetica,
font-fallback2: Arial,
font-failure: sans-serif
);
$font_config: (
font-style: normal,
font-variant: normal,
font-weight: normal,
font-measurements: 100%/1.5,
font-family: unquote(#{map-values($fonts)})
);
body {
font: sh-setup($font_config);
}
Мне нравится удобочитаемость в этом случае, и я точно знаю, какой шрифт предназначен для отображения с точки зрения приоритетов. Недостатком является то, что мне пришлось интерполировать map-values()
unquote()
Расставание Мысли
Теперь, когда мы рассмотрели эти варианты использования с сокращением animation
font
zip()
Может ли это быть использовано для background
Как насчет синтаксиса grid
Это действительно зависит от вас, чтобы выбрать подход. Я надеюсь, что, по крайней мере, я вдохновил вас на исследование других вспомогательных функций, таких как zip()
Когда вы рискуете в неизвестность, помните: «Человек, который никогда не ошибался, никогда не пробовал ничего нового». ~ Эйнштейн