SCSS — это специализированный метаязык, созданный на основе языка SASS, который позволяет расширить возможности обычных каскадных таблиц стилей. Он добавляет в CSS такие важные инструменты как переменные, наследование, логические операции, математические функции, разделение на модули. В дальнейшем код написанный на SCSS транслируется в обычный CSS для дальнейшего использования. Это позволяет упростить и увеличить скорость разработки. Особенно это актуально, если разработка ведется сразу несколькими людьми.
Предыдущая статья из серии Создание Core.NET 2.0 веб-приложения на Vue.js
Переменные (variable) SCSS
Благодаря использованию переменных у нас появляется возможность задавать имена для любых используемых данных, таких как цвета, шрифты, числовые значения и другие, а в дальнейшем использовать в любом месте. Задание переменной осуществляется с помощью символа $. Давайте рассмотрим пример.
В папке App создадим файл variables.scss со следующим содержимым.
|
1 |
$blue: #4682B4; |
Здесь мы объявили переменную с именем blue и хранимым значением #4682B4.
Теперь изменим файл App.vue, добавив в него немного стилей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 вложенность реализуется отдельными блоками, что не очень удобно.
|
1 2 3 4 5 6 7 8 9 |
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } |
Изменим главную страницу добавив стили для списков внутри навигации. Обратите внимание, что благодаря вложенности, мы указываем стили для конкретной иерархии элементов. Благодаря этому, два идентичных списка буду выглядеть по-разному, в зависимости от родительского тега.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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
|
1 2 3 |
h2 { color: darkorange; } |
И теперь добавим этот фрагмент
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
Импортирование позволяет разделить большой файл на несколько отдельных частей, которые будут более удобными в поддержке и обслуживании. Мы уже использовали импортирование подключив файл с переменными
|
1 |
@import './variables.scss'; |
Обратите внимание, что задавать импортированный файл можно как по полному пути, так и только по его имени.
|
1 |
@import 'variables'; |
Миксины (mixin) SCSS
При настройке стилей довольно часто встречаются куски однотипного кода, которые используются в разных компонентах. Например, это использование вендорных префиксов (стили для конкретных браузеров). Для упрощения работы с ними используются так называемые миксины, или примеси. Они позволяют создавать конкретные группы свойств.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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
Наследование позволяет расширять ранее определенные наборы свойств, путем добавления новых. Мы можем определять базовые наборы, и создавать их узкоспециализированные реализации. Примером может служить сообщение. Сначала мы определяем общие свойства, характерные для всех типов сообщений, а потом расширяем добавляя специализированные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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
Использование математических операторов очень упрощает процесс разработки стилей. Мы можем применять базовые операции, такие как сложение (+), вычитание (-), умножение (*), деление (/), процент (%).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
Условный оператор позволяет динамически изменять стили в зависимости от некоторых условий. Например возможна проверка значения какой-либо переменной и установка стиля только при определенном условии.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
