CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

Зачем в Bootstrap 4 в начале стилей идут CSS переменные?

Vital » 27 авг 2019, 20:44

Кто-нибудь знает, для чего в Bootstrap 4 в самом начале всех стилей идет блок с пользовательскими переменными CSS?
Они по-ходу вроде нигде не используются потом..
Вот этот блок:
Код: Выделить всё
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#CSS Custom Properties, #CSS Custom Properties in Bootstrap 4, #CSS variables in Bootstrap 4
Vital
 
Сообщения: 21
Зарегистрирован: 14 фев 2017, 15:40

Re: Зачем в Bootstrap 4 в начале стилей идут CSS переменные?

Александр » 04 сен 2019, 18:33

Они для кастомной темезации могут использоваться. Т. е. если кто захочет использовать пользовательские CSS-переменные — то пожалуйста. Переменные генерируются с такими же именами и значеиями, как и переменные и значения в картах SASS, что в добавок может помогать немного при работе в инспекторах стилей.
Для понимания, вот код из файла _root.scss:
Код: Выделить всё
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

По этой теме можете в справке Bootstrap 4 еще посмотреть https://getbootstrap.com/docs/4.3/getti ... -variables
Александр
 
Сообщения: 397
Зарегистрирован: 20 мар 2014, 17:05


Вернуться в CSS