💻

Лекция по SCSS: Препроцессор для CSS

Jul 12, 2024

Лекция по SCSS: Препроцессор для CSS

Введение

SCSS (Sassy CSS) - это препроцессор для CSS, который добавляет к нему функции, такие как переменные, вложенные стили и миксины.
Файл SCSS компилируется в обычный CSS, чтобы браузеры могли его распознать и применить стили.

Основы SCSS

Переменные

Переменные в SCSS начинаются со знака $.
Пример создания переменной: $primary-color: red; $secondary-color: blue;
Они облегчают управление повторяющимися значениями, такими как цвета и размеры.

Вложенные стили

Вложенные стили позволяют структурировать CSS таким образом, чтобы его было легче читать и поддерживать.
Пример вложенных стилей: .nav { ul { margin: 0; padding: 0; li { display: inline-block; } } }

Миксины (mixins)

Миксины позволяют создавать повторно используемые блоки стилей, которые можно включить в любой части вашего SCSS-кода.
Пример создание миксина: @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; }
Использование миксина: .box { @include border-radius(10px); }

Компиляция SCSS в CSS

Чтобы преобразовать SCSS в CSS, нужно использовать компилятор, например, node-sass.
Установка и использование компилятора через командную строку: npm install -g node-sass
Команда для компиляции SCSS в CSS: node-sass path/to/scss/main.scss path/to/css/style.css --watch
- --watch - параметр для отслеживания изменений в SCSS файлах и автоматической перекомпиляции.

Структура файлов SCSS

Структура папок и файлов: scss/ ├── abstract/ ├── base/ ├── components/ ├── layout/ ├── pages/ ├── main.scss css/ ├── style.css
main.scss импортирует все SCSS файлы: @import 'abstract/variables'; @import 'abstract/mixins'; @import 'base/reset'; @import 'components/buttons'; @import 'layout/header'; @import 'pages/home';

Примеры использования

Создание переменных

  $primary-color: #333;
  $font-stack: Helvetica, sans-serif;

Использование переменных

  body {
    font: 100% $font-stack;
    color: $primary-color;
  }

Вложенные стили

  .nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li { display: inline-block; }
    }
  }

Миксины и их использование

  @mixin box-shadow($shadow) {
    -webkit-box-shadow: $shadow;
       -moz-box-shadow: $shadow;
            box-shadow: $shadow;
  }

  .box { 
    @include box-shadow(2px 2px 5px #000); 
  }

Заключение

SCSS значительно упрощает разработку стилей, делая их более читаемыми и управляемыми.
Использование переменных, миксинов и вложенных стилей помогает избежать дублирования кода

Full transcript