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

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

Вот пример:

 @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") ;
}

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

В соответствии с пунктом 3, заполнители могут использоваться вместе с миксинами, чтобы уменьшить дублирование кода и при этом сохранить гибкость миксина…

 /* PLACEHOLDER 
============================================= */

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

/* BUTTON MIXIN 
============================================= */

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

/* BUTTONS
============================================= */

.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. Вы можете не согласиться со всем этим. Sass — все еще довольно новая технология, поэтому мы продолжаем изучать новые лучшие практики с ней. Если у вас есть свои предложения, не стесняйтесь комментировать.