Цветовые переменные начальной загрузки

Я только начал изучать Bootstrap 5 на этой неделе и имею минимальные знания CSS, поэтому я до сих пор не знаю, как большая часть этого работает. Я успешно установил загрузчик с помощью npm в демонстрационный проект, но мне было интересно, как использовать расширенный набор цветов в файле _variable.scss (синий-100, синий-200, синий-300 и т. д.). Я надеялся, что смогу сделать что-то вроде того, что можно сделать с Tailwind, например:

<body class="bg-gray-200">

...но не похоже, что это так просто. Есть ли простой способ добиться этого?


bootstrap-5
person Nolan Melhart    schedule 19.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я предполагаю, что вы хотите использовать SCSS и скомпилировать его. В этом случае вы можете добавить свои варианты сразу после @include "variables"; и "utilities", например:

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
@import "your_own_cool_stuff";  // ** your file goes here

// Layout & components
@import "root";
// ... and so on

Затем вам нужно добавить к отдельной переменной $utilities... см. Утилита API — Использование API в документах BS5... вот так:

// ** contents of your file

$your_awsome_colors = (
  "gray-100": #eee,
  "gray-200": #ddd
  // and so on...
) !default;

// use API to merge background-color

// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
  $utilities,
  (
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"), $your_awsome_colors,
        ),
      ),
    ),
  )
);

Наконец, они будут сгенерированы, когда ..

// Utilities
@import "utilities/api";

..line вызывается в SCSS.

person Vino    schedule 21.02.2021