Pull to refresh
0

Как писать более чистый CSS и рациональный SASS

Reading time 4 min
Views 30K
Original author: Anthony Dispezio
Sass заработал репутацию среди разработчиков интерфейсов благодаря переводу сложного CSS в разумный многоразовый код. Это бесспорно важно для масштабирования и поддержки, и позволяет разработчикам устранять недостатки, представленные в традиционном CSS.

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

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


Скромная примесь


Примеси – это основные «кирпичи» для построения Sass. Просто заверните группу свойств или селекторов в примеси, и код можно будет использовать повторно, включив примесь чуть позже.
Единоразовое написание общего кода позволяет вносить дальнейшие изменения в одном месте – ключевом участнике методологии DRY. Данный пример примеси кнопки содержит свойство border, которое потом используется различными классами кнопок:

SCSS
@mixin button {
    border-radius: 4px;
    border: 4px solid black;
}

.search-button {
    @include button;
    background-color: blue;
}

.cancel-button {
    @include button;
    background-color: red;
}


CSS
.search-button {
    border-radius: 4px;
    border: 4px solid black;
    background-color: blue;
}

.cancel-button {
    border-radius: 4px;
    border: 4px solid black;
    background-color: red;
}


Чтобы генерировать уникальный CSS для каждого класса, включите примесь в значения каждого аргумента:

SCSS
@include button('search', blue);
@include button('cancel', red);


CSS
.search-button {
    background-color: blue;
    border-radius: 4px;
    border: 4px solid black;
}
.cancel-button {
    background-color: red;
    border-radius: 4px;
    border: 4px solid black;
}


Даже в этом небольшом примере легко увидеть рост эффективности Sass.

Негативные аспекты и дублирование


Несмотря на то, что проще всего использовать примеси для повторяющихся блоков CSS, это не всегда является наиболее разумным выходом. Вывод CSS, который генерируется примесями, теперь содержит два класса с одинаковым свойством border.
Если постоянно использовать примеси таким образом, это приведет к тому, что CSS раздуется от большого количества дублированного кода. К счастью, мы можем использовать наследование, чтобы найти места, в которых примеси окажутся лишними.

«Сушим» код с помощью наследования


Функция наследования позволяет классам наследовать все свойства другого класса путем группировки селекторов. Вместо дублирования CSS каждый раз, как это делает примесь, селектор группируется с классом, который он наследует:

SCSS
.button {
    border-radius: 4px;
    border: 4px solid black;
}

.search-button {
    @extend .button;
    background: blue;
}


CSS
.button,
.search-button {
    border-radius: 4px;
    border: 4px solid black;
}

.search-button {
    background: blue;
}


Теперь у нашего вывода есть только одно значение свойств границы, которое поддерживают наши кнопки.

Счастливы вместе


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

SCSS
.button {
    border-radius: 4px;
    border: 4px solid black;
}

@mixin button($name, $background-color) {
    .#{$name}-button {
        background-color: $background-color;
        @extend .button;
    }
}

@include button('search', blue);
@include button('cancel', red);


Классы, которые наследуют общие свойства кнопки, сгруппированы с классом .button, что исключает дублирование свойств границы.

CSS
.buton, .search-button, .cancel-button {
    border-radius: 4px;
    border: 4px solid black; 
}

.search-button {
    background-color: blue; 
}

.cancel-button {
    background-color: red;
}


Такое сочетание примеси и наследования можно использовать для генерации большого количества кнопок, тем самым снижая количество дублируемого CSS.

Ищем золотую середину


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

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

Tags:
Hubs:
+8
Comments 36
Comments Comments 36

Articles

Information

Website
www.paysto.ru
Registered
Founded
Employees
11–30 employees
Location
Россия