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

Вконтакте
Facebook
Telegram
Twitter
Одноклассники
Дзен
Google+

 
Рубрики: Vue.js

shwan

Программист .NET

×
%d такие блоггеры, как: