Знакомство с SCSS при работе с Vue.js

 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/.  Подписывайтесь, чтобы не пропустить новые выпуски.

Источник: CODE BLOG


программированиеvuejsjavascriptscss4682b4
28
6.606 GOLOS
0
В избранное
CODE BLOG
Блог о программировании
28
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (0)
Сортировать по:
Сначала старые