Статьи

Как написать красивый сас

Октябрь 25, 2018

Ниже приведен небольшой отрывок из нашей книги « Jump Start Sass» , написанной Уго Жирауделем и Мириам Сюзанн. Это руководство для начинающих Sass. Члены SitePoint Premium получают доступ к своему членству, или вы можете купить копию в магазинах по всему миру.

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

Есть несколько отличных линтеров для Sass: scss-lint — это гем Ruby, а также новые sasslint и stylelint , которые являются пакетами npm для Node. Оба позволяют настроить правила линтинга для вашего проекта, такие как максимальные уровни вложенности, начальные нули на десятичных дробях и организация свойств в блоке. Вы даже можете создавать свои собственные правила по мере необходимости.

Смотреть AtoZ: Sass
Узнайте Sass буква за буквой
Смотреть этот курс Смотреть этот курс

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

Если вы используете переменные, функции и миксины Sass, рекомендуется документировать, как они работают. Авторы инструментария сочтут это особенно важным, но любой, кто имеет обширный инструментарий, встроенный в их проекты, должен также рассмотреть документацию для своей команды. Еще одним отличным инструментом от Hugo является SassDoc , пакет npm, который анализирует ваши комментарии Sass и создает красивый статический сайт с вашей документацией.

Вот комментарий SassDoc для нашей функции tint(..) Он начинается с общего описания, а затем явно документирует каждый параметр и ожидаемый результат: 

  /// Mix a color with `white` to get a lighter tint.
///
/// @param {String | list} $color -
///   The name of a color in your palette,
///   with optional adjustments in the form of `(<function-name>:<args>)`.
/// @param {Percentage} $percentage -
///   The percentage of white to mix in.
///   Higher percentages will result in a lighter tint.
///
/// @return {Color} -
///   A calculated css-ready color-value based on your global color palette.
@function tint(
  $color,
  $percentage
) {
  /* … */
}

Используя стандартную тему (из которой можно выбрать несколько, или вы можете создать свою собственную), SassDoc преобразует этот комментарий в статический веб-сайт, как показано ниже.

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

True — это ваш набор инструментов для юнит-тестирования, написанный на чистом Sass, так что он работает везде, где Sass компилируется. Тестирование ядра происходит в функциях утверждений: assert-equal(..)assert-unequal(..)assert-true(..)assert-false(..) Они организованы в тесты и могут быть сгруппированы в тестовые модули. Вот пример истинного тестирования нашего
функция tint(..) 

 @include test-module('Tint [function]') {
  @include test('Adjusts the tint of a color') {
    @include assert-equal(
      tint('primary', 25%),
      mix(#fff, color('primary'), 25%),
      'Returns a color mixed with white at a given weight.');
  }
}

После компиляции True выведет комментарии CSS с подробными результатами и предупредит вас в консоли, если какие-либо тесты не пройдут: 

  / * # Модуль: оттенок [функция] * /
 / * ------------------------- * /
 / * Тест: регулировка оттенка цвета * /
 / * ✔ Возвращает цвет, смешанный с белым при заданном весе.  * /

 / *… * /

 /* # РЕЗЮМЕ ---------- */
 / * 16 тестов: * /
 / * - 14 пройдено * /
 / * - 0 Не удалось * /
 / * - 2 Вывод в CSS * /
 / * -------------------- * /

Что означает, что два теста были «выведены в CSS» в этом примере? Эти тесты не показаны, но они тестируют выход миксина. Используя чистый CSS, True может только подтвердить результаты функциональных тестов, поэтому смешанные тесты просто выводятся в CSS, где их можно сравнивать вручную (брутто) или с помощью парсера CSS (лучше!). Чтобы упростить эту задачу, True интегрируется с участниками тестов JavaScript, такими как Mocha , и имеет интерфейс командной строки Ruby, написанный Скоттом Дэвисом . Любой из них полностью проанализирует выходные данные CSS, включая выходные данные из миксинов, и даст вам полные результаты как для функциональных, так и для миксиных тестов: 

 Luminance [function]
  ✓ Returns luminance of a color

Contrast Ratio [function]
  ✓ Returns contrast ratio between two colors

Contrast [function]
  ✓ Dark on light
  ✓ Light on dark
  ✓ Default light fallback
  ✓ Default dark fallback
  ✓ Multiple contrast options

contrasted [mixin]
  ✓ Dark on light
  ✓ Light on dark

Tint [function]
  ✓ Adjusts the tint of a color

Shade [function]
  ✓ Adjusts the shade of a color

Color [function]
  ✓ Named color
  ✓ Referenced color
  ✓ Adjusted color
  ✓ Complex nesting of colors
  ✓ Multiple adjustment function arguments


16 passing (11ms)

38
Share: