SCSS

SCSS (Sassy CSS) — это один из синтаксисов Sass (Syntactically Awesome Stylesheets), препроцессора CSS. SCSS является более гибким и удобочитаемым расширением CSS, добавляя возможности, такие как переменные, вложенность, миксины, модули и другие функции, которые упрощают написание и поддержку кода.

История

SCSS появился в 2010 году в версии Sass 3. В отличие от оригинального синтаксиса Sass (основанного на отступах), SCSS использует синтаксис, аналогичный традиционному CSS, но с расширенными возможностями. Этот синтаксис получил широкое распространение благодаря удобству перехода с обычного CSS.

Отличия от CSS

SCSS полностью совместим с CSS, но добавляет множество новых возможностей:

Переменные — позволяют хранить значения и использовать их повторно.
Вложенность — возможность писать стили более логично, в соответствии со структурой HTML.
Миксины — повторно используемые блоки стилей, которые можно передавать параметры.
Импорты — подключение отдельных файлов без дублирования кода.
Операции — выполнение математических вычислений прямо в коде.

Основные возможности

Переменные

SCSS поддерживает использование переменных, которые хранят различные значения, такие как цвета, размеры и шрифты:

$primary-color: #3498db;
$font-stack: Arial, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

Вложенность

SCSS позволяет использовать вложенность селекторов, что делает код более читаемым:

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
      }
    }
  }
}

Миксины

Миксины работают как функции в программировании и позволяют повторно использовать код:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

Импорты

SCSS поддерживает модульную структуру кода:

@use 'variables';
@use 'buttons';

Операции

Можно выполнять математические вычисления прямо в SCSS:

.box {
  width: 100px + 50px; // 150px
}

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

Поскольку браузеры не поддерживают SCSS напрямую, его необходимо компилировать в CSS. Это можно сделать с помощью препроцессоров, таких как Dart Sass, Node-sass или других инструментов.

Пример компиляции SCSS в CSS с помощью командной строки:

sass style.scss style.css

Применение

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

См. также

Ссылки

Официальный сайт Sass