Статьи

Использование функции Sass ‘Zip ()

Декабрь 13, 2018

Sass избавляет от необходимости писать повторяющийся код, когда дело доходит до наших таблиц стилей, но вы уже знали, что иначе вы не будете читать это далеко. Я хочу показать вам хороший, умный способ написания сокращенных свойств без необходимости запоминать порядок значений для CSS, таких как animationfont

Прежде чем вы начнете : Поскольку я использую карты Sass, было бы неплохо освоиться с ними. Так получилось, что есть как минимум две замечательные статьи.

Никогда не запоминайте, что вы можете посмотреть в книге

Название, которое вы только что прочитали, является знаменитой цитатой Альберта Эйнштейна — и при этом хорошей. Мое предположение заключается в том, что я не единственный разработчик в мире, задающий себе вопрос: «Теперь … directionfill-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()configmap-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

Идти дальше

Теперь, когда мы сделали это с animationfont Свойство 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-sizeline-height/font-sizeline 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()

Расставание Мысли

Теперь, когда мы рассмотрели эти варианты использования с сокращением animationfontzip() Может ли это быть использовано для background Как насчет синтаксиса grid Это действительно зависит от вас, чтобы выбрать подход. Я надеюсь, что, по крайней мере, я вдохновил вас на исследование других вспомогательных функций, таких как zip() Когда вы рискуете в неизвестность, помните: «Человек, который никогда не ошибался, никогда не пробовал ничего нового». ~ Эйнштейн

34
Share: