Можем ли мы расширить CSS с помощью пользовательских функций? - PullRequest
Новая
       47

Можем ли мы расширить CSS с помощью пользовательских функций?

0 голосов
/ 17 ноября 2018

Можем ли мы создавать свои собственные пользовательские функции с JavaScript для управления анализируемым CSS. Возвращаясь к Sass, функция, которую мы часто используем, состоит в том, чтобы сгенерировать единицу измерения расстояния, рассчитанную по базовой высоте линии, помогая создать простой и поддерживаемый вертикальный ритм и скорость, которая будет выше, чем у других препроцессоров или из-под контроля. ? Сейчас я тестирую эти различные методы, поэтому я хочу знать, что я делаю правильно или нет, или все будет не в порядке? 

$line-height: 32px;

/* vertical rhythm function */
@function vr($amount) {
  @return $line-height * $amount;
}

/* input */
.selector { margin-bottom: vr(2) }

/* output */
.selector { margin-bottom: 64px; }

/* input */
.selector { margin-bottom: 2vr }

/* output */
.selector { margin-bottom: 64px; }

var vr = function (css) {
  var lineHeight = 32;

  css.eachDecl(function (decl) {
    if (decl.value.match(/vr/)) {
      decl.value = lineHeight * parseFloat(decl.value) + 'px';
    }
  });
};
...