Что используешь из SCSS

SCSS (Sassy CSS) — это препроцессор, расширяющий возможности CSS. Вот что я чаще всего использую:

1. Вложенность (Nesting)
Позволяет писать более читаемый код:

.nav {
  ul { margin: 0; }
  a { 
    color: blue;
    &:hover { text-decoration: underline; }
  }
}

2. Переменные
Для хранения цветов, размеров и т.д.:

$primary-color: #3498db;
.button { background: $primary-color; }

3. Миксины (Mixins)
Для переиспользуемых стилей:

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

4. Импорты (@import)
Для модульности (хотя в новых версиях лучше использовать @use):

@import 'variables', 'mixins';

5. Наследование (@extend)
(Использую осторожно из-за побочных эффектов):

%message-shared {
  border: 1px solid #ccc;
}
.success { @extend %message-shared; }

6. Математические операции

.container { width: 100% - 30px; }

Также использую:

• Циклы (@for, @each)
• Условные конструкции (@if)
• Функции (darken(), lighten())
• Карты (maps) для сложных структур данных

SCSS помогает писать поддерживаемый и DRY-код, но важно не злоупотреблять сложными конструкциями.