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

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

Автоматический способ - через карту и цикл#

// 1. Определяем все цвета в карте
$colors: (
  'bg': #d0d0d0,
  'text': #333,
  'primary': #3498db,
  'secondary': #6c757d,
  'success': #28a745,
  'danger': #dc3545
);

// 2. Автоматически создаем CSS переменные
:root {
  @each $name, $value in $colors {
    --#{$name}Color: #{$value};
  }
}

// 3. Используем
.container {
  background-color: var(--bgColor);
  color: var(--textColor);
}

Еще более продвинутый способ - миксин#

// Миксин для автоматического создания CSS переменных
@mixin generate-css-vars($prefix: '', $vars-map: ()) {
  @each $key, $value in $vars-map {
    --#{$prefix}#{$key}: #{$value};
  }
}

// Использование
:root {
  @include generate-css-vars('color-', $colors);
  @include generate-css-vars('size-', (
    'small': 12px,
    'medium': 16px,
    'large': 24px
  ));
}

Результат:#

:root {
  --color-bg: #d0d0d0;
  --color-text: #333;
  --color-primary: #3498db;
  --size-small: 12px;
  --size-medium: 16px;
  --size-large: 24px;
}

Так намного удобнее - добавил новый цвет в карту, и CSS переменная создалась автоматически!

В Bootstrap именно так и сделано, только еще сложнее с учетом всех их потребностей.

Contents