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

Моё использование SCSS в разработке

Как опытный фронтенд-разработчик, я активно использую SCSS (Sass) как основной препроцессор CSS, который значительно улучшает процесс вёрстки и поддержки стилей. Вот ключевые возможности, которые я применяю в проектах:

Основные возможности SCSS в моей работе

1. Вложенность (Nesting) Позволяет создавать иерархическую структуру, соответствующую HTML:

.navbar {
  background: #333;
  
  &__list {
    display: flex;
    
    &-item {
      margin: 0 10px;
      
      &:hover {
        color: #ff5733;
      }
    }
  }
}

2. Переменные (Variables) Для создания единой системы дизайна и темизации:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Roboto', sans-serif;
$spacing-unit: 8px;

.button {
  background: $primary-color;
  font-family: $font-stack;
  padding: $spacing-unit * 2;
}

3. Миксины (Mixins) Для переиспользуемых блоков кода, особенно для вендорных префиксов:

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

.card {
  @include flex-center(column);
  @include box-shadow(0, 4px, 8px, rgba(0,0,0,0.1));
}

4. Функции (Functions) Для вычислений и преобразований значений:

@function rem($px) {
  @return ($px / 16px) * 1rem;
}

@function lighten-color($color, $percent) {
  @return lighten($color, $percent);
}

.container {
  font-size: rem(18px);
  background: lighten-color(#3498db, 20%);
}

5. Наследование (Extend) Для переиспользования стилей без дублирования:

%button-base {
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.primary-button {
  @extend %button-base;
  background: #3498db;
  color: white;
}

.secondary-button {
  @extend %button-base;
  background: transparent;
  border: 2px solid #3498db;
}

Продвинутые техники

6. Импорт и модульность Разбиваю стили на логические модули:

// main.scss
@import 'variables';
@import 'mixins';
@import 'components/buttons';
@import 'components/forms';
@import 'layout/header';
@import 'layout/footer';

7. Циклы и условия Для генерации систематических стилей:

// Генерация классов отступов
@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: $spacing-unit * $i;
  }
  .mb-#{$i} {
    margin-bottom: $spacing-unit * $i;
  }
}

// Условные стили
@mixin theme-colors($theme) {
  @if $theme == 'dark' {
    background: #333;
    color: #fff;
  } @else {
    background: #fff;
    // Светлая тема
  }
}

8. Карты (Maps) и списки Для организации сложных структур данных:

$breakpoints: (
  'xs': 320px,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
);

$colors: (
  'primary': #3498db,
  'secondary': #2ecc71,
  'danger': #e74c3c,
  'warning': #f39c12
);

@function color($key) {
  @return map-get($colors, $key);
}

.alert {
  background: color('warning');
}

Практические паттерны

БЭМ-подход с SCSS:

.block {
  &__element {
    &--modifier {
      // Стили
    }
  }
}

Адаптивный дизайн с миксинами:

@mixin respond-to($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  
  @media (min-width: $value) {
    @content;
  }
}

.container {
  width: 100%;
  
  @include respond-to('md') {
    width: 750px;
  }
  
  @include respond-to('lg') {
    width: 970px;
  }
}

Интеграция с современным стеком

В современных проектах я использую SCSS вместе с:

• PostCSS для дополнительных трансформаций
• CSS Modules или CSS-in-JS для изоляции стилей
• Webpack или Vite для сборки
• Stylelint для линтинга
• Autoprefixer для вендорных префиксов

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

Важно отметить, что я всегда слежу за производительностью — избегаю чрезмерной вложенности, оптимизирую итоговый CSS и использую source maps для отладки. Современные возможности CSS (кастомные свойства, CSS Grid) дополняют, а не заменяют SCSS в моём workflow.