8 советов, которые помогут вам правильно составлять Sass

С помощью Sass создаются синтаксически безупречные таблицы стилей (Syntactically Awesome Style sheets), или, по крайней мере, предполагается, что он должен это делать.

При эффективном использовании Sass помогает задать масштабируемый и краткий CSS. При неправильном использовании Sass может реально увеличить размер файла и добавить ненужный или дублированный код.

Ниже приводится ряд полезных советов, которые помогут вам извлечь из Sass максимум пользы...

Содержание

1. Структурируйте Sass

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

Файлы частичных шаблонов создаются с помощью символов нижнего подчеркивания и не выносятся в отдельные CSS-файлы. Каждый частичный шаблон должен импортироваться с помощью основного Sass-файла (global.scss), расположенного в корневой папке Sass.

Вот пример структуры папок, который иллюстрирует этот принцип:

vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss
5 примеров, которые помогут понять, как работает CSS opacity

Такая структура папок обеспечивает простую работу с ней сайта, а также добавление новых файлов. Например, новые модули могут быть легко добавлены в папку модуля и затем к global.scss с помощью @import.

Чтобы продемонстрировать это, ниже приводится пример файла global.scss:

/* VENDOR - Резервные и дополнительные файлы по умолчанию.
========================================================================== */

@import 'vendor/_normalize.scss';

/* BASE - Файл базовых Переменных, содержащий также начальные Примеси и Заполнители.
========================================================================== */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';

/* FRAMEWORK - Структура файлов.
========================================================================== */

@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';

/* MODULES - Многократно используемые элементы сайта.
========================================================================== */

@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';

2. Используйте переменные Sass более эффективно

Переменные являются одним из наиболее простых элементов Sass, но некоторые разработчики все еще время от времени используют их неправильно. Разработка конвенции о присвоении имен по всему сайту имеет важное значение для работы с переменными. Без нее они менее понятны и возможно их дублированное использование.

Вот некоторые советы по эффективному применению переменных:

  • Назначайте переменным понятные имена;
  • Применяйте и придерживайтесь конвенции назначения имен (Модульной, BEM и т.д.);
  • Убедитесь, что использование переменной оправдано.

Вот несколько примеров эффективного использования:

$orange: #ffa600; 
$grey: #f3f3f3; 
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;

А вот это неэффективно:
	$link: #ffa600;
$listStyle: none;
$radius: 5px;
Sass: директива @import

3. Используйте меньше примесей

Примесь - это отличный способ включить раздел кода несколько раз в пределах сайта. Тем не менее, включение примеси это то же самое, что копирование и вставка стилей в файл CSS. Это создает массу дубликатов кода и может привести раздуванию CSS-файла.

Поэтому примесь следует использовать только с аргументами для быстрого создания модифицированных стилей.
Вот пример:

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

Примесь rounded-corner может быть использована в любой ситуации, для этого просто нужно изменить значение $arc, тогда ее стоит использовать:

.tab-button {
     @include rounded-corner(5px); 
}

.cta-button {
     @include rounded-corner(8px); 
}

Пример неэффективного использования примеси может выглядеть вот так:

@mixin cta-button {
    padding: 10px;
    color: #fff;
    background-color: red;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

Эта примесь не имеет аргументов и, следовательно, лучше применить заполнитель, что вплотную подводит нас к пункту 4.

4. Включайте заполнители

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

%bg-image {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url(/img/image-one.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url(/img/image-two.jpg");
}

И компилируемый CSS:

.image-one, .image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url(/img/image-one.jpg") ;
}

.image-two {
    background-image:url(/img/image-two.jpg") ;
}
Изучаем SASS: руководство для новичка

Повторяющийся код в заполнителях выводится только один раз и только для уникальных стилей, применяемых к отдельным селекторам. Если они не используются, стили заполнителей не выводятся вовсе.

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

/* ЗАПОЛНИТЕЛЬ 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* ПРИМЕСЬ КНОПКИ 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* КНОПКИ
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}

5. Используйте для вычислений функции

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

Например, функции полезны для расчета ширины в процентах от конкретного элемента:

@function calculate-width ($col-span) {
    @return 100% / $col-span
}

.span-two {
    width: calculate-width(2); // spans 2 columns, width = 50%
}

.span-three {
    width: calculate-width(3); // spans 3 columns, width = 33.3%
}

6. Поддерживайте порядок и хорошую организацию

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

Глобальные элементы должны храниться в базовой папке. Базовая папка должна содержать глобальные переменные, такие как шрифты и цветовые схемы:

$font-primary: 'Roboto', sans-serif; 
$font-secondary: Arial, Helvetica, sans-serif;

$color-primary: $orange;
$color-secondary: $blue;
$color-tertiary: $grey;

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

$tab-radius: 5px;
$tab-color: $grey;

7. Ограничивайте количество вложений

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

Вот некоторые золотые правила для вложений:

  • Никогда не разветвляйте структуру более 3 уровней вниз;
  • Убедитесь, что CSS на выходе чист и пригоден для повторного использования;
  • Используйте вложение, когда на то есть причины, а не в качестве опции по умолчанию.

8. Старайтесь делать все проще

В завершающем пункте этой статьи я бы отметила, что вы должны стараться, чтобы все элементы были настолько простыми, насколько это возможно. Цель Sass - написать более чистый, более управляемый CSS-код.

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

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

Вывод

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

РедакцияПеревод статьи «8 Tips to Help You Get the Best out of Sass»