Стайлгайд: синтаксис sass

1188
views

sass guide

Если несколько front-end разработчиков работают на одном проекте, это только вопрос времени, когда один из них станет писать код как ему придет на ум. И когда разработчики начинают работать со строками кода не придерживаясь определенного стиля написания, тогда и начинаются потери во времени, проблемы с пониманием написанного, споры.

Для урегулирования этих проблем существуют стайлгайды, придерживаясь которых, можно повысить ясность кода и облегчить дальнейшую поддержку проекта. Именно о стайлгайде работы с sass я и хочу поведать.

Данная статья является дополнением к развернутой вводной статье «Используем препроцессор sass«.

Прежде всего самые основные правила, которые привычными стали еще в css.

  • Отступы размером в два пробела, никаких табов;
  • Строки длиной до 80 символов (в идеале);
  • Каждое свойство с новой строки;
  • Пробел между свойством и значением;
// Правильно
.foo {
  display: block;
  overflow: hidden;
  padding: 0 1em;
}

// Неправильно
.foo {
    display: block; overflow: hidden;

    padding: 0 1em;
}

 Строки

Придерживаясь простых правил форматирования строк, можно снизить итоговый вес файла и избежать проблем связанных с кодировками.

Кодировка

Что бы избежать любых потенциальных проблем связанных с кодировкой, рекомендуется устанавливать в начале каждого файла кодировку utf-8.

Для этого достаточно всего лишь добавлять первой строчкой директиву:

@charset 'utf-8';

 Кавычки

Компилятор sass одинаково обработает строковые переменные в кавычках и без. Но для корректной работы подсветки синтаксиса в различных ide рекомендуется строки оборачивать одинарными кавычками. Например в некоторых ide переменная с именем цвета (возьмем orange), без кавычек может определиться как сам цвет, а не строка.

// Правильно
$direction: 'left';

// Неправильно
$direction: left;

 Строки как css значения

Некоторые css значения, такие как initial или sans-serif требуют быть не обернутыми в кавычки. Иначе эти значения будут невалидными.

// Правильно
$font-type: sans-serif;

// Неправильно
$font-type: 'sans-serif';

 Строки содержащие кавычки

В случае если строка содержит одинарную кавычку в тексте, строку лучше оборачивать двойными кавычками. Но можно и экранировать обратным слэшем.

// Нормально
@warn 'You can\'t do that.';

// Нормально
@warn "You can't do that.";

 URL ресурсов

URL ресурсов также должны быть обернуты в одинарные кавычки по тем же причинам, что и строковые переменные.

// Правильно
.foo {
  background-image: url('/images/kittens.jpg');
}

// Неправильно
.foo {
  background-image: url(/images/kittens.jpg);
}

 Цифры

В sass цифрами считаются многие значения с различными мерами измерений, например длины, продолжительность эффектов, углы, радиусы и т.д. С цифрами можно производить математические вычисления.

Ноли

Десятичные дроби должны всегда храниться с лидирующим нолем.

// Правильно
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Неправильно
.foo {
  padding: 2.0em;
  opacity: .5;
}

 Размерности

При обнулении значений размерность нулевого значения указывать не нужно.

// Да
$length: 0;

// Нет
$length: 0em;

Самым большим заблуждением для  меня было это то, что в значениях свойств цифры и их размерности нельзя склеивать как обычные строки. Для добавления размерности к числу, необходимо это число умножать на единицу размерности.

$value: 42;

// Правильно
$length: $value * 1px;

// Неправильно
$length: $value + px;

Следует заметить, что добавлять 0px тоже можно, но выглядит это немного не логично. Также следует обратить внимание, что добавление 0px не конвертирует размерность переменной.

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

В целом, менять размерности таким путем не лучшая идея, но все зависит от целей, которых вы добиваетесь. Так как добавление размерности к числу (конкатенацией) заблокируют какие либо дальнейшие математические операции с этой переменной.

Что бы избавиться от размерности в переменной, её следует поделить на единицу размерности.

$length: 42px;

// Правильно
$value: $length / 1px;

// Неправильно
$value: str-slice($length + unquote(''), 1, 2);

Вычисления

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

// Правильно
.foo {
  width: (100% / 3);
}

// Неправильно
.foo {
  width: 100% / 3;
}

Цвета

Задание цвета имеет большое значение в стилизации проекта и sass обладает огромным функционалом, который обеспечивает гибкость и удобство манипуляции с цветами.

Формат цвета

С целью простейшего задания цветов и манипулирования ими, я бы рекомендовал придерживаться следующего приоритета форматов цветов:

  1. HSL notation;
  2. RGB notation;
  3. Hexadecimal notation (в малом регистре).

Имена цветов в css лучше не использовать, так как они не всегда полностью дают понятие как цвет будет выглядеть, особенно для людей не владеющих английским высокого уровня. Например grey на самом деле выглядит темнее чем  darkgrey. А также написание grey и gray может ввести в заблуждение.

Рассмотрим преимущества различных цветовых схем.

HSL является не только одним из самых понятных форматом для восприятия человеческим мозгом, он также позволяет автору стилей манипулировать цветом придавая различную насыщенность или яркость.

RGB остается наиболее популярным, так как его легко взять из макета PSD или AI. А возможность манипуляции с прозрачностью чаще всего достаточна для стилизации всех элементов и придания свойств различным их состояниям. Также в данном формате можно интуитивно осознавать, как изменится цвет добавляя или уменьшая параметры красного/зеленого/синего.

HEX формат уходит в прошлое. Используйте его только в случае, если других вариантов у вас нет.

// Да
.foo {
  color: hsl(0, 100%, 50%);
}

// Тоже да
.foo {
  color: rgb(255, 0, 0);
}

// Нет
.foo {
  color: #f00;
}

// Нет
.foo {
  color: #FF0000;
}

// Точно нет
.foo {
  color: red;
}

Когда используете HSL или RGB добавляйте пробел после запятых и не оставляйте пространства между цифрами и скобками.

// Да
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Нет
.foo {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

 Цвета и переменные

С этим все очень просто. Если используете цвет больше чем один раз — запишите его как переменную. Это позволит легко изменить цвет всего шаблона в случае необходимости.

$main-theme-color: hsl(330, 50%, 60%);

Следует отметить, что называть переменные именем цвета — плохая практика, так как например переменная $pink, которая используется в многочисленных местах, в будущем (при редизайне) может измениться на другой цвет. И тогда название переменной будет только сбивать с толку.

//Да
$main-theme-color: hsl(330, 50%, 60%);

//Возможно
$sass-pink: hsl(330, 50%, 60%);
$main-theme-color: $sass-pink;

//Нет
$sass-pink: hsl(330, 50%, 60%);

Таким образом переменная $main-theme-color не зависит от содержимого и может быть с любым цветом не вводя в заблуждение.

lighten и darken

Функции lighten и darken манипулируют яркостью цвета передаваемого в качестве параметра функции. Но эти функции не всегда могут предоставить желаемый результат. Так как эти функции изменяют яркость цвета довольно интенсивно. Как вариант можно использовать функцию mix, которая позволяет смешивать цвета, например с черным или белым.

Пример как выглядит изменение цвета с помощью различных sass функций

Что бы не писать каждый раз mix функцию с тремя параметрами, можно использовать следующие простые функции tint и shade.

//Светлее
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

//Темнее
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

 Списки

Списки в sass  по сути своей являются массивами, только называются списками. Предназначены они для хранения любой текстовой информации (шрифты, массивы цветов и т.д).

Записывать списки следует по таким рекомендациям:

  • могут быть в одну строку и в несколько
  • если строка больше 80 символов, необходимо список делать в несколько строк
  • если строка будет использоваться в css (строка шрифтов), то разделять запятыми
  • список всегда обернут в круглые скобки
  • в конце точка с запятой
// Да
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Да
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
);

// Нет
$font-stack: 'Helvetica' 'Arial' sans-serif;

// Нет
$font-stack: 'Helvetica', 'Arial', sans-serif;

// Нет
$font-stack: ('Helvetica', 'Arial', sans-serif,);

Когда добавляете новый элемент к списку необходимо использовать специальную функцию append().

$shadows: (0 42px 13.37px rgb(160, 0, 0));

// Да
$shadows: append($shadows, $shadow, comma);

// Нет
$shadows: $shadows, $shadow;

Maps (объекты)

Map — это объект, в котором хранится структурированные данные в формате ключ-значение. Значения могут хранить различные типы данных.

Объекты должны придерживаться таких рекомендаций:

  • пробел после двоеточия
  • открывающая круглая скобка должна быть на той же строке, что и двоеточие
  • ключи в одиночных кавычках
  • запятая после каждого значения
  • закрывающая круглая скобка на новой строке
  • точка с запятой после скобки без пробелов
// Да
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Нет
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

В остальном при написании sass рекомендуется использовать те же правила, что и при написании обычного css или сугубо индивидуальные. Например в каком порядке записывать свойства в классе. Кто-то предпочитает записывать их по алфавиту, а кто-то по смыслу. например вот так:

.foo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  overflow: hidden;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

Для интереса могу сказать, что по результатам голосования на css-tricks: 39% разработчиков записывают стили в произвольном порядке, 45% по типу, 2% по длине строки (представляете?!) и 14% по-алфавиту.

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

Подписаться на блог по эл. почте