Sass заработал репутацию среди разработчиков интерфейсов благодаря переводу сложного CSS в разумный многоразовый код. Это бесспорно важно для масштабирования и поддержки, и позволяет разработчикам устранять недостатки, представленные в традиционном CSS.
Две из наиболее важных функций Sass – это примеси и наследование. Несмотря на то, что их обычно группируют ввиду их способности генерировать дополнительные стили, каждая из них предлагает уникальный подход для решения привычных проблем с CSS.
При наработке опыта использования Sass ключевым моментом является понимание того, когда использовать примеси или наследование. Но примеси и наследования никоим образом не являются исключительными функциями, а если их использовать вместе, они могут обеспечивать более чистую и понятную разметку. Чтобы лучше понимать, как эти две функции могут работать вместе, давайте начнем с более подробного рассмотрения их уникального поведения.
Примеси – это основные «кирпичи» для построения Sass. Просто заверните группу свойств или селекторов в примеси, и код можно будет использовать повторно, включив примесь чуть позже.
Единоразовое написание общего кода позволяет вносить дальнейшие изменения в одном месте – ключевом участнике методологии DRY. Данный пример примеси кнопки содержит свойство border, которое потом используется различными классами кнопок:
SCSS
CSS
Чтобы генерировать уникальный CSS для каждого класса, включите примесь в значения каждого аргумента:
SCSS
CSS
Даже в этом небольшом примере легко увидеть рост эффективности Sass.
Несмотря на то, что проще всего использовать примеси для повторяющихся блоков CSS, это не всегда является наиболее разумным выходом. Вывод CSS, который генерируется примесями, теперь содержит два класса с одинаковым свойством border.
Если постоянно использовать примеси таким образом, это приведет к тому, что CSS раздуется от большого количества дублированного кода. К счастью, мы можем использовать наследование, чтобы найти места, в которых примеси окажутся лишними.
Функция наследования позволяет классам наследовать все свойства другого класса путем группировки селекторов. Вместо дублирования CSS каждый раз, как это делает примесь, селектор группируется с классом, который он наследует:
SCSS
CSS
Теперь у нашего вывода есть только одно значение свойств границы, которое поддерживают наши кнопки.
Подход с использованием только примесей раздувает код, так как каждый раз, когда мы вызываем примесь, мы, сами того не желая, дублируем свойства границы. Вместо того чтобы вписать такие общие свойства непосредственно в примесь, мы можем наследовать существующий класс, в который они входят, сокращая количество дублируемого кода:
SCSS
Классы, которые наследуют общие свойства кнопки, сгруппированы с классом .button, что исключает дублирование свойств границы.
CSS
Такое сочетание примеси и наследования можно использовать для генерации большого количества кнопок, тем самым снижая количество дублируемого CSS.
Разумное использование примесей и наследования привело к созданию нескольких приметных модулей Sass, но не забывайте все время проверять вывод CSS. Sass – это не панацея от каждой проблемы CSS, а потому для достижения желаемого результата необходимо определенное мастерство.
Экспериментируйте с различными методиками и смотрите, как эти функции можно переплетать, создавая мощные примеси и чистые таблицы стилей. Наличие активной аудитории Sass означает, что всегда существуют новые идеи, которые можно исследовать, изучать и дополнять.
Две из наиболее важных функций 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 означает, что всегда существуют новые идеи, которые можно исследовать, изучать и дополнять.
Полезные решения Paysto для читателей Хабра:
→ Получите оплату банковской картой прямо сейчас. Без сайта, ИП и ООО.
→ Принимайте оплату от компаний через Интернет. Без сайта, ИП и ООО.
→ Приём платежей от компаний для Вашего сайта. С документооборотом и обменом оригиналами.
→ Автоматизация продаж и обслуживание сделок с юр.лицами. Без посредника в расчетах.
→ Принимайте оплату от компаний через Интернет. Без сайта, ИП и ООО.
→ Приём платежей от компаний для Вашего сайта. С документооборотом и обменом оригиналами.
→ Автоматизация продаж и обслуживание сделок с юр.лицами. Без посредника в расчетах.