Developer

SASS/SCSS: переменные, миксины, функции, @use и @forward

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

SCSS — стандарт препроцессора; ждут знания модульной системы @use вместо @import.

Объяснение

// _tokens.scss
$breakpoints: (sm: 640px, md: 768px, lg: 1024px);
$radius: 8px;
 
// _mixins.scss
@use "sass:map";
@use "tokens" as t;
 
@mixin respond($bp) { @media (min-width: map.get(t.$breakpoints, $bp)) { @content; } }
@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@function rem($px, $base: 16) { @return math.div($px, $base) * 1rem; }
 
// component.scss
@use "mixins" as m;
.card {
  border-radius: t.$radius;
  &__title { @include m.truncate; font-size: m.rem(18); }
  &--featured { border: 2px solid var(--accent); }
  @include m.respond(md) { display: grid; }
  &:hover { box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
}
 
@each $name, $color in (success: green, danger: red) { .text-#{$name} { color: $color; } }
%placeholder { color: gray; }         // @extend
.a { @extend %placeholder; }
ВозможностьПример
Переменные$color: #333
Вложенность&:hover, &__el
Миксины@mixin/@include
Функции@function, встроенные map.get, math.div, color.adjust
Управляющие директивы@if, @each, @for, @while
Модули@use, @forward
Наследование@extend с %placeholder

Модули: @use "file" as alias подключает с пространством имён и один раз (без побочного дублирования CSS); @forward — реэкспорт модуля (файл-«барабан» index.scss). @import устарел (глобальные имена, повторная загрузка). Деление: math.div вместо /.

Нюансы и подводные камни

  • Глубокая вложенность увеличивает специфичность и размер CSS.
  • @extend в сложном контексте генерирует неожиданные селекторы.
  • Переменные SASS не реагируют на смену темы в рантайме — для тем используйте CSS-переменные.
  • Не превращайте препроцессор в слой «магии»: логика — в миксинах с понятными именами.
  • Quasar: переменные темы задаются в quasar.variables.scss.

Практика

  1. Создайте миксин respond и функцию rem.
  2. Организуйте стили на @use/@forward с index.scss.
  3. Сгенерируйте утилитарные классы цветов через @each.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки