SCSS — это специализированный метаязык, созданный на основе языка SASS, который позволяет расширить возможности обычных каскадных таблиц стилей. Он добавляет в CSS такие важные инструменты как переменные, наследование, логические операции, математические функции, разделение на модули. В дальнейшем код написанный на SCSS транслируется в обычный CSS для дальнейшего использования. Это позволяет упростить и увеличить скорость разработки. Особенно это актуально, если разработка ведется сразу несколькими людьми.
Предыдущая статья из серии Создание Core.NET 2.0 веб-приложения на Vue.js
Переменные (variable) SCSS
Благодаря использованию переменных у нас появляется возможность задавать имена для любых используемых данных, таких как цвета, шрифты, числовые значения и другие, а в дальнейшем использовать в любом месте. Задание переменной осуществляется с помощью символа $. Давайте рассмотрим пример.
В папке App создадим файл variables.scss со следующим содержимым.
$blue: #4682B4;
Здесь мы объявили переменную с именем blue и хранимым значением #4682B4.
Теперь изменим файл App.vue, добавив в него немного стилей.
<template>
<div id="home">
<h1>Hello World!</h1>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
@import './variables.scss';
h1 {
color: $blue;
}
</style>
Как вы видите в блоке стилей мы сначала импортировали данные созданного ранее файла с переменными, а потом использовали переменную для установки цвета заголовка. Обратите внимание, что у нас уже включено отслеживание изменений файлов. Это означает, что если во время выполнения приложения, мы изменим какое-либо значение, то нам не придется пересобирать его. Достаточно просто сохранить файл и все изменения отобразятся на экране. В худшем случае придется обновить страницу. Это очень упрощает процесс разработки, потому что не приходится ждать компиляции после каждого изменения.
В итоге получаем следующий результат:
Вложенности SCSS
В HTML существует четкая вложенность элементов. Благодаря этому, структура данных визуально воспринимается значительно легче. В обычном же CSS вложенность реализуется отдельными блоками, что не очень удобно.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Изменим главную страницу добавив стили для списков внутри навигации. Обратите внимание, что благодаря вложенности, мы указываем стили для конкретной иерархии элементов. Благодаря этому, два идентичных списка буду выглядеть по-разному, в зависимости от родительского тега.
<template>
<div id="home">
<nav>
<ul>
<li>text 1</li>
<li>text 2</li>
</ul>
</nav>
<h1>Hello World!</h1>
<ul>
<li>text 3</li>
<li>text 4</li>
</ul>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
nav {
ul {
margin: 0;
padding: 0;
color: red;
list-style: none;
}
li { display: inline-block; }
}
</style>
Фрагментирование (partial) SCSS
У нас есть возможность создавать именованные фрагменты разметки, сохраненные в отдельные файлы для дальнейшего использования в нескольких местах. Обратите внимание, что имя файла фрагмента обязательно должно начинаться с символа подчеркивания. Это позволяет компилятору пропускать эти файлы и не добавлять их отдельно в результирующий CSS. Для подключения фрагмента используется команда @import.
Создадим фрагмент _h2partial.scss
h2 {
color: darkorange;
}
И теперь добавим этот фрагмент
<template>
<div id="home">
<h1>Hello World!</h1>
<h2>Привет, мир!</h2>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
@import './variables.scss';
@import '_h2partial';
</style>
Импорт (import) SCSS
Импортирование позволяет разделить большой файл на несколько отдельных частей, которые будут более удобными в поддержке и обслуживании. Мы уже использовали импортирование подключив файл с переменными
@import './variables.scss';
Обратите внимание, что задавать импортированный файл можно как по полному пути, так и только по его имени.
@import 'variables';
Миксины (mixin) SCSS
При настройке стилей довольно часто встречаются куски однотипного кода, которые используются в разных компонентах. Например, это использование вендорных префиксов (стили для конкретных браузеров). Для упрощения работы с ними используются так называемые миксины, или примеси. Они позволяют создавать конкретные группы свойств.
<template>
<div id="home">
<div class="box">
hello
</div>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
@mixin border-r($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-r(10px);
border-style: solid;
max-width: 100px;
}
</style>
Как вы видите, мы успешно добавили рамочку со скругленными углами с помощью миксин.
Наследование (extend) SCSS
Наследование позволяет расширять ранее определенные наборы свойств, путем добавления новых. Мы можем определять базовые наборы, и создавать их узкоспециализированные реализации. Примером может служить сообщение. Сначала мы определяем общие свойства, характерные для всех типов сообщений, а потом расширяем добавляя специализированные.
<template>
<div id="home">
<div class="success">OK</div>
<div class="error">Error</div>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
</style>
Математические операторы (math) SCSS
Использование математических операторов очень упрощает процесс разработки стилей. Мы можем применять базовые операции, такие как сложение (+), вычитание (-), умножение (*), деление (/), процент (%).
<template>
<div id="home">
<div class="marg">Отступ</div>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
.marg {
margin-left: 100px + 20px;
padding-top: 10% + 5%;
}
</style>
Условный оператор (if) SCSS
Условный оператор позволяет динамически изменять стили в зависимости от некоторых условий. Например возможна проверка значения какой-либо переменной и установка стиля только при определенном условии.
<template>
<div id="home">
<div class="wid">Светофор</div>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
$width: 150px;
.wid {
@if($width < 200) {
color: red;
}
@else if ($width > 700) {
color: green;
}
@else {
color: yellow;
}
width: $width;
}
</style>
Заключение
Это далеко не все возможности SCSS. Здесь я рассмотрел только основные, наиболее часто используемые возможности. За дополнительной информацией можно обратиться на сайт https://sass-scss.ru/. Исходный код доступен в репозитоии github.
Следующая статья: Создаем компонент Vue.js
P.S. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
