Статьи

Подтверждение ввода в Sass Mixins и функции

Август 25, 2018

Когда вы пишете Sass, а другие его используют, они вполне могут ошибаться с вашим кодом. На самом деле, давайте будем честными, когда я пишу Sass и использую его несколько дней спустя (или даже часами позже), я делаю ошибки с моим кодом. Вы тоже можете. К счастью, в Sass есть ряд функций, которые помогают нам проверять вклад, который разработчики вносят в Sass, который мы пишем.

Эти методы особенно полезны для команд, которые делятся миксинами Sass или поддерживают стартовый набор или набор миксинов и функций. У разработчиков есть два варианта использования совместно используемой библиотеки Sass: либо они могут отправлять электронную почту, общаться в чате, пинговать или иным образом прерывать друг друга, чтобы помочь с настраиваемым микшированием, либо использовать подробную документацию, включая проверку кода, чтобы помочь друг другу легко устранять неполадки кода. (Что бы это ни стоило, это не просто вещь Sass: любой общий код требует связи через прерывание или документацию.) Давайте узнаем о некоторых из самых полезных методов проверки Sass сейчас.

Проверка отдельных значений

Миксины и функции принимают параметры. Если вы передаете код другому разработчику на работе или выпускаете библиотеку с открытым исходным кодом, вы должны убедиться, что аргументы соответствуют вашим намерениям. Эти функции полезны для проверки переменных в аргументах.

Убедиться, что переменные существуют: variable-exists()

Если ваша функция или миксин используют переменную, определенную разработчиком, убедитесь, что переменная существует, с помощью метки с именем — меткой variable-exist () . Эта функция возвращает truefalse 

 @mixin create-font-size() {
  @if global-variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "Please define the variable `$base-font`.";
  }
  @if global-variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "Please define the variable `$line-height`.";
  }
}

// developer's code
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

Однако лучше, чем полагаться на правильную установку глобальных переменных разработчиками, — включить эти переменные по умолчанию в вашу библиотеку: 

 // Your plugin:
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  // etc...
}

// developer's code:
$base-font: 16px;
p {
  @include create-font-size();
}

Проверка типа данных значения: type-of()

Если вам нужно знать, какой тип значения представляет переменная, используйте type-of() . Эта функция вернет одну из следующих строк:

  • строка
  • цвет
  • число
  • BOOL
  • значение NULL
  • список
  • карта

Это полезно для проверки определенных видов ввода. Вы можете убедиться, что разработчик передает только числовое значение в миксин, который создает размеры: 

 @mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "Make sure that `$height` is a number.";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "Make sure that `$width` is a number.";
  }
}

Вы также можете использовать type-of() 

 @function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "Make sure you pass a valid color to the color-fade() function.";
  }
}

Если вам нужен разработчик для создания карты параметров конфигурации для темы, вы можете убедиться, что у них есть действительная карта: 

 @mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // output here
  } @else {
    @warn "Make sure `$settings` is a Sass map.";
  }
}

Подтверждение единицы измерения номера: unit()

Иногда математика в функции или mixin требует определенной единицы в своих аргументах. Вы можете использовать unit() чтобы подтвердить, что значение имеет правильную единицу. Например, вы можете использовать миксин, который создает размеры в пикселях и полях. ( Обратите внимание, что для этого лучше использовать пакет для запуска задач, но если вам нужно сохранить его в Sass, читайте дальше. ) 

 $rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "Make sure `$value` is in px or rem.";
  }
}

Проверка списков и карт

Мы уже видели, как использовать type-of() Мы также можем проверить две важные вещи: есть ли значение в списке и есть ли ключ на карте.

Поиск значения в списке: index()

Функция index () сообщит вам, найдено ли значение в списке. Технически, он вернет либо позицию значения в списке (число), либо null Это не настоящая булева функция, но для наших целей правда и ложь достаточно хороши.

Функция index() Эта функция полезна для тестирования определенных значений в миксинах измерений. Если бы у нас был миксин, который выводил бы вычисления отступов или полей с использованием сокращенного обозначения сверху, справа, снизу или слева от CSS, мы бы хотели убедиться, что мы не пытаемся вычислять значения, такие как initialinheritauto 

 $rem-size: 16px !default;

@mixin margin-rem($values...) {
  $output: ();
  @each $value in $values {
    @if index(auto inherit initial 0, $value) {
      $output: append($output, $value);
    } @else {
      $output: append($output, $value / $rem-size * 1rem);
    }
  }
  margin: #{$output};
}

Убедитесь, что на карте есть ключ: map-has-key()

Если вы проверяете карту на предмет определенного ключа, вы можете использовать функцию map-has-key (), чтобы убедиться, что ключ существует на проверяемой карте. Это полезно, если вы используете карту $breakpoints 

 $breakpoints: (
  small: 480px,
  medium: 720px,
  large: 1024px
);

@mixin bp($label) {
  @if map-has-key($breakpoints, $label) {
    @media screen and (min-width: map-get($breakpoints, $label)) {
      @content;
    }
  } @else {
    @warn "`#{$label}` is not a valid key in `$breakpoints`.";
  }
}

Валидация миксинов и функций

Иногда вы пишете миксин или функцию, которая зависит от существующего миксина или функции или, возможно, от другой библиотеки Sass. Давайте обновим bp()Breakpoint Sass . Мы могли бы расширить это так: 

 $breakpoints: (
  small: 480px,
  medium: 720px,
  large: 1024px
);

@mixin bp($label) {
  @if map-has-key($breakpoints, $label) {
    $width: map-get($breakpoints, $label);
    @if mixin-exists(breakpoint) {
      @include breakpoint($width) {
        @content;
      }
    } @else {
      @media screen and (min-width: $width) {
        @content;
      }
    }
  } @else {
    @warn "`#{$label}` is not a valid key in `$breakpoints`.";
  }
}

Теперь наш bp()breakpoint() Если нет, то мы воспользуемся нашим собственным смешанным кодом медиазапроса.

Есть соответствующая функция под названием function-exists() . Вы можете использовать его, чтобы проверить, существует ли конкретная функция. Если у вас есть математика, основанная на нестандартной функции, вы можете убедиться, что есть библиотека, которая содержит эту функцию. Компас добавляет функцию pow() Если вы создаете шкалу размера шрифта, для которой требуется эта функция, проверьте ее: 

 $base-font-size: 16px;
$scale-interval: 1.2;

@function scale-font($steps, $size: $base-font-size, $scale: $scale-interval) {
  @if function-exists(pow) {
    @return pow($scale, $steps) * $size;
  } @else {
    @error "A `pow()` function is required for scale math: please include Compass or another library with a `pow()` function.";
  }
}

Сообщение о проблемах: @warn@error

Как вы, вероятно, заметили в приведенных выше примерах кода, я позаботился о том, чтобы обеспечить хорошую обратную связь с разработчиком, когда наша проверка уловит некоторые неправильные данные. Большую часть времени я использовал @warn . Эта директива отправляет сообщение на консоль разработчика, но позволяет компилятору завершить работу.

Иногда, когда мне нужно полностью остановить компилятор (без определенного ввода или функции, значительный объем вывода будет нарушен), я использовал @error, чтобы отправить сообщение на консоль и остановить компилятор.

Для получения дополнительной информации о разнице между @warn@errorмою предыдущую статью на эту тему или соответствующий раздел в ссылке Sass на SitePoint.

Вывод

Никто не идеален — ни те, кто использует наш код, ни даже мы через несколько часов после его написания! Вот почему важно помогать себе и другим, проверяя вклад в наши миксины и функции. Эти методы не только помогают вам более эффективно использовать собственный код, но и значительно упрощают совместное использование и поддержку библиотеки Sass для команд.

Как вы предотвращаете ошибки в вашем Sass? Дайте нам знать об этом в комментариях!

43
Share: