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. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
[DISPLAY_ULTIMATE_PLUS]