Bootstrap ka barokun

Bootstrap 4 bɛrɛbɛn ni an ka Sass fɛn caman sɛgɛsɛgɛli ye minnu bɛ don a kɔnɔ diɲɛ kɔnɔ cogoya fɛɛrɛw fɛ walasa ka barokun nɔgɔya ani ka fɛnw caman cili kɛ.

Daminɛ kuma

Bootstrap 3 kɔnɔ, barokunko tùn bɛ Laɲini kosɛbɛ ni fɛn caman sɛgɛsɛgɛli ye LESS kɔnɔ, CSS ladamulen na, ani barokun cogoya-sɛbɛn danfaralen dɔ min tùn bɛ an ka distdosiyew kɔnɔ. Ni cɛsiri dɔw kɛra, mɔgɔ bɛ se ka Bootstrap 3 cogoya labɛn kokura pewu k’a sɔrɔ a ma maga filenw kolomaw la. Bootstrap 4 bɛ fɛɛrɛ dɔ di min bɛ dɔn, nka a tɛ kelen ye dɔɔnin.

Sisan, barokun bɛ Kɛ ni Sass fɛn caman sɛgɛsɛgɛli ye, Sass kartiw, ani CSS ladamulen. Barokun cogoya sɛbɛn min ɲɛsinnen bɛ o ma tugun, o tɛ yen; o nɔ na, ​​i bɛ se ka barokun jɔlen in kɛ walasa ka fɛnw fara ɲɔgɔn kan minnu bɛ fɛnw jiginni, biɲɛw ani fɛn wɛrɛw fara a kan.

Sass ye

Baara kɛ ni an ka source Sass files ye walasa ka nafa sɔrɔ variables, maps, mixins ani fɛn wɛrɛw la ni i bɛ Sass lajɛ ni i yɛrɛ ka nafolo pipeline ye.

Dosiyew sigicogo

Ni aw bɛ se tuma o tuma, aw kana Bootstrap ka filenw kolomaw sɛmɛntiya. Sass fɛ, o kɔrɔ ye k'i yɛrɛ ka stylesheet (fɔlikan) Dabɔ min bɛ Bootstrap (Bootstrap) Ladon walasa i ka Se k'a Lakodɔn k'a janya. Ni an y’a miiri ko i bɛ baara kɛ ni pake ɲɛmɔgɔ ye i n’a fɔ npm, i bɛna dosiye dɔ sɔrɔ min bɛ i n’a fɔ nin:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

N’i ​​y’an ka source files telesarse ani n’i tɛ baara kɛ ni package manager ye, i b’a fɛ ka fɛn dɔ sigi sen kan i bolo fɛ min bɛ tali kɛ o structure la, ka Bootstrap ka source files to u dan na ni i ta ye.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Import kɛli

I ka custom.scss, i bɛ Bootstrap ka source Sass filew ladon. Sugandili fila bɛ aw bolo: Bootstrap bɛɛ don a la, walima aw mago bɛ yɔrɔ minnu na, aw bɛ olu ta. An bɛ dusu don o labanw kɔnɔ, hali n’a y’a sɔrɔ aw k’a dɔn ko wajibi dɔw ni fɛn dɔw bɛ yen minnu bɛ tali kɛ an ka yɔrɔw bɛɛ la. Aw fana bɛna JavaScript dɔw Dòn an ka 'pluginw na.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Ni o sigicogo in bɛ sen na, i bɛ se ka daminɛ ka Sass fɛn caman sɛmɛntiya ani ka kartiw dɔw ladilan i ka custom.scss. Aw bɛ se fana ka Bootstrap yɔrɔ dɔw farali daminɛ // Optionaldakun jukɔrɔ i n’a fɔ aw mago bɛ cogo min na. An b’a Fɔ ko i ka baara Kɛ ni import stack dafalen ye ka Bɔ an ka bootstrap.scssdosiye la k’a Kɛ i ka daminɛyɔrɔ ye.

Defaults (dafalenw) bεε bε Yεlεma

Sass bεε bε Bootstrap kɔnɔ, !defaultdarapo bε yen min b’a To i bε se ka bεnkansεbεn nafama bεε bε bεn i yɛrɛ ka Sass kɔnɔ k’a sɔrɔ i ma Bootstrap ka source code bε Yεlεma. Yɛlɛmafɛnw kopi kɛ ani k’u nɔrɔ i n’a fɔ a mago bɛ cogo min na, k’u nafaw sɛmɛntiya, ani ka !defaultdarapo bɔ. Ni fɛn dɔ bɛ Di a ma kaban, o tuma a tɛna Segin ka Di a ma ni nafalanw ye minnu bɛ Bootstrap kɔnɔ.

Aw bɛ Bootstrap ka fɛn caman sɛgɛsɛgɛli dafalen sɔrɔ scss/_variables.scss. Yɛlɛma dɔw bɛ sigi null, o fɛn caman tɛ bɔ nafolo la fo n’u bɛ wuli ka bɔ i ka labɛnni na.

Variable overrides ka kan ka na an ka functions, variables, ani mixins donna kɔfɛ, nka sanni imports tɔw ka na.

Nin ye misali ye min bɛ fɛn caman Changer background-colorani colorfor the <body>ni i bɛ Bootstrap don ani ka a lajɛ npm fɛ:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Segin kɛ i n’a fɔ a mago bɛ fɛn o fɛn na Bootstrap kɔnɔ, diɲɛ sugandiliw fana sen bɛ o la min bɛ duguma.

Kartiw ni loopuw

Bootstrap 4 kɔnɔ, Sass karti damadɔ bɛ yen, nafa fila-fila minnu bɛ CSS ni ɲɔgɔn cɛ denbayaw labɔli nɔgɔya. An bɛ baara kɛ ni Sass kartiw ye an ka kulɛriw, grid breakpoints ani fɛn wɛrɛw kama. I n’a fɔ Sass bεε bε bεn cogo min na, Sass kartiw bεε la, !defaultdarapo bε yen wa u bε se ka bεn ani ka janya.

An ka Sass karti dɔw bɛ fara ɲɔgɔn kan ka kɛ lankolonw ye ka kɛɲɛ ni u ka daminɛ ye. O bɛ kɛ walasa ka sira di Sass karti dilen dɔ bonya nɔgɔya ma, nka a bɛ na ni musaka ye min bɛ kɛ sababu ye ka fɛnw bɔ karti dɔ kɔnɔ ka gɛlɛya dɔɔnin.

Karti ladilan

Walasa ka kulɛri dɔ sɛmɛntiya min bɛ an ka $theme-colorskarti kɔnɔ, i ka ninnu fara i ka Sass file ladamulen kan:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

A fara a kan karti kan

Walasa ka kulɛri kura $theme-colorsfara , i ka kilisi kura ni nafa fara a kan:

$theme-colors: (
  "custom-color": #900
);

Aw bɛ bɔ karti kan

Walasa ka kulɛriw bɔ $theme-colors, walima karti wɛrɛ la, baara kɛ ni map-remove. Aw k’a dɔn ko aw ka kan k’a don an ka ɲininiw ni sugandiliw cɛ:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Kilisi wajibiyalenw

Bootstrap bɛ a miiri ko kilisi kɛrɛnkɛrɛnnen dɔw bɛ Sass kartiw kɔnɔ i n’a fɔ an yɛrɛ bɛ baara kɛ cogo min na ani k’u janya. Ni i bɛ karti minnu bɛ a kɔnɔ, i bɛ olu kɛ ka kɛɲɛ ni i yɛrɛ sago ye, i bɛ se ka filiw sɔrɔ yɔrɔ min na Sass karti kɛrɛnkɛrɛnnen dɔ ka kilisi bɛ baara kɛ.

Misali la, an bɛ baara Kɛ ni primary, success, ani dangerbutɔnw ye minnu bɛ Bɔ ka $theme-colorsɲɛsin jɛgɛnsira, butɔni ani foroko cogoyaw ma. Nin kilisi ninnu nafaw falen-falen man kan ka ko si jira, nka n’i y’u bɔ, o bɛ se ka kɛ sababu ye ka Sass ka jatebɔko gɛlɛyaw lase. O ko ninnu na, i b’a fɛ ka Sass kode caman sɛmɛntiya min bɛ baara kɛ ni o nafaw ye.

Baarakɛcogo

Bootstrap bɛ baara Kɛ ni Sass baarakɛcogo damadɔ ye, nka kulu fitinin dɔrɔn de bɛ Kɛ ka ɲɛsin barokun caman ma. An ye baara saba Dòn a la walasa ka nafaw Sɔrɔ ka Bɔ kulɛri kartiw la:

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

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

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Olu b’a To i bɛ Se ka kulɛri kelen Tà Sass karti la i n’a fɔ i bɛ baara Kɛ ni kulɛri caman ɲɔgɔnna ye cogo min na ka Bɔ v3 la.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

An fana bɛ baara wɛrɛ Kɛ walasa ka kulɛri hakɛ$theme-colors kɛrɛnkɛrɛnnen dɔ Sɔrɔ karti kan. Nivo negative nafaw bɛna kulɛri yeelen, ka sɔrɔ nivo sanfɛtaw bɛna dibi don.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Tiɲɛ na, i tun bɛ baara Weele ka tɛmɛ paramɛtɛrɛ fla la: kulɛri tɔgɔ ka Bɔ $theme-colors(misali la, fɔlɔ walima farati) ani jatebla hakɛ dɔ.

.custom-element {
  color: theme-color-level(primary, -10);
}

Baarakɛcogo wɛrɛw bɛ Se ka Fàra ɲɔgɔn kan don nataw la walima i yɛrɛ ka Sass ladamulen walasa ka nivo baarakɛcogo Dabɔ Sass karti wɛrɛw kama, walima hali jenɛriki dɔ n’i b’a fɛ ka kumakan fɔ ka caya.

Kulɛriw danfara

An bɛ baara wɛrɛ min Kɛ Bootstrap kɔnɔ o ye kulɛri danfara baarakɛcogo ye, color-yiq. A bɛ baara Kɛ ni YIQ kulɛri yɔrɔ ye walasa ka yeelen ( #fff) walima dibi ( #111) danfaralan dɔ Lasegin a yɛrɛma ka Da basigi kulɛri kofɔlen kan. Nin baara in nafa ka bon kɛrɛnkɛrɛnnenya la mixins walima loops (lupulu) la i bɛ kalasi caman lawuli yɔrɔ minnu na.

Misali la, walasa ka kulɛriw sɛgɛsɛgɛli kɛ ka bɔ an ka $theme-colorskarti la:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

A bɛ se ka kɛ fana danfara magow la minnu bɛ kɛ siɲɛ kelen:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Aw bɛ se fana ka basigi kulɛri dɔ jira ni an ka kulɛri karti baarakɛcogo ye:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Boli SVG la

An bɛ baara kɛ ni escape-svgbaarakɛcogo ye walasa ka boli <, >ani #taamasiyɛnw SVG kɔkanna jaw kama. O sɛbɛnniw ka kan ka boli walasa ka kɔkanna jaw jira ka ɲɛ IE kɔnɔ. Ni baara bɛ kɛ ni escape-svgbaarakɛcogo ye, data URIw ka kan ka fɔ.

Fàra ni Bɔ baarakɛcogo kan

An bɛ baara Kɛ ni addani subtractbaarakɛcogo ye walasa ka CSS calcbaarakɛcogo Lamini. O baara ninnu kun fɔlɔ ye ka filiw bali ni “unitless” 0nafa dɔ tɛmɛna ka don calcfɔcogo dɔ la. Fɔcogo minnu bɛ i n’a fɔ calc(10px - 0)olu bɛna fili dɔ Lasegin navigatɔrɔw bɛɛ la, hali n’u ye jatebɔ siratigɛ la tiɲɛ ye.

Misali la, calc bɛ baara kɛ yɔrɔ min na:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Misali la, calc tɛ baara kɛ yɔrɔ min na:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass sugandiliw

Bootstrap 4 bɛrɛbɛn ni an ka custom variables file ye min bɛ a kɔnɔ ani ka diɲɛ CSS fɛɛrɛw wuli nɔgɔya la ni $enable-*Sass variables kura ye. Override a variable's value ani ka recompile ni npm run testi n'a fɔ a mago bɛ cogo min na.

Aw bɛ se ka nin fɛn caman ɲɔgɔnna sɔrɔ ani k’u labɛn diɲɛ sugandili jɔnjɔnw kama Bootstrap ka scss/_variables.scssdosiye kɔnɔ.

Ɲɛ

Bootstrap ka fɛn suguya caman ni nafalan caman bɛ jɔ ni kulɛriw ye minnu ɲɛfɔlen don Sass karti dɔ kɔnɔ. Nin karti in bɛ se ka loopu kɛ Sass kɔnɔ walasa ka sariyaw sigi senkan teliya la.

Kulɛriw bɛɛ

Kulɛriw bɛɛ bɛ sɔrɔ Bootstrap 4 kɔnɔ, olu bɛ sɔrɔ i n’a fɔ Sass variables ani Sass map in scss/_variables.scssfile. O bɛna bonya bɔko misɛnnin nataw la walasa ka biɲɛ wɛrɛw fara a kan, i n’a fɔ an bɛ palɛti gris min don a la kaban.

Aw bɛ se ka baara kɛ ni ninnu ye cogo min na aw ka Sass kɔnɔ, o filɛ nin ye:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Kulɛri nafama kalanw fana bɛ sɔrɔ sigicogo colorni background-color.

Barokun kulɛriw

An bɛ baara Kɛ ni kulɛri bɛɛ kulu fitinin dɔ ye walasa ka kulɛri fitinin dɔ Dabɔ walasa ka kulɛriw labɛn, o fana bɛ Sɔrɔ i n’a fɔ Sass fɛn caman sɛgɛsɛgɛli ani Sass karti Bootstrap ka scss/_variables.scssdosiye kɔnɔ.

Gris ye

A ye fɛn caman sɛgɛsɛgɛli kɛ fɛn caman sɛgɛsɛgɛli la ani Sass karti in scss/_variables.scssfor consistent shades of gray across your project. A kɔlɔsi ko ninnu ye “gris cool” ye, minnu bɛ teli ka taa ton bulu nɔgɔlen dɔ fɛ, sanni ka kɛ gris neutre ye.

, kɔnɔ scss/_variables.scss, i bɛ Bootstrap ka kulɛri caman ɲɔgɔnna sɔrɔ ani Sass karti. $colorsSass karti misali dɔ filɛ nin ye :

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Nafaw fara ɲɔgɔn kan, ka bɔ yen, walima ka fɛn dɔw sɛmɛntiya karti kɔnɔ walasa ka u baaracogo kura ye yɔrɔ caman wɛrɛw la. A fɔ man di nka nin waati in na, yɔrɔ bɛɛ tɛ baara kɛ ni Sass karti in ye. Kuma kura nataw bɛna an jija ka ɲɛtaa kɛ o ko la. Fɔ ka se o waati ma, aw bɛ labɛn kɛ ka baara kɛ ni ${color}fɛn caman sɛgɛsɛgɛli ye ani nin Sass karti in.

A yɔrɔw

Bootstrap ka fɛn caman ni a ka nafalanw bɛ jɔ ni @eachlupuw ye minnu bɛ segin-ka-bɔ Sass karti kan. O bɛ dɛmɛ kɛrɛnkɛrɛnnenya la ka ɲɛsin fɛn dɔ ka fɛn caman ɲɔgɔnnabɔli ma an fɛ $theme-colorsani ka jaabiw sɛgɛsɛgɛli kɛ kariyɔrɔ kelen-kelen bɛɛ la. Ni i bɛ nin Sass kartiw labɛn ka kɛɲɛ ni u yɛrɛ sago ye ani ka u labɛn kokura, i bɛ i yɛrɛ ye i ka fɛn caman Changements (Yɛlɛma) bɛ jira nin loops (lupulu) ninnu na.

Fɛn minnu bɛ fɛn caman sɛmɛntiya

Bootstrap ka yɔrɔ caman bɛ jɔ ni base-modifier class approach ye. O kɔrɔ ye ko cogoya fanba bɛ sɔrɔ basigi kalasi dɔ la (misali la, .btn) k’a sɔrɔ cogoya caman ɲɔgɔnna bɛ dan fɛn caman sɛmɛntiyalanw ma (misali la, .btn-danger). O bεε lajɛlen bε jɔ ka Bɔ $theme-colorskarti la walasa ka an ka bεnkansεbεn kalasi hakɛ n’a tɔgɔ bεε Labɛn.

$theme-colorsAn bɛ loop (lupu) Kɛ cogo min na karti kan walasa ka modifiers (daɲɛw) Sɔrɔ .alertcomponent (yɔrɔ) la ani an ka .bg-*kɔkanna nafalanw bɛɛ la, misali fla filɛ nin ye .

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Jaabiw

Nin Sass loop ninnu tɛ dan kulɛri kartiw dɔrɔn ma, olu fana. Aw bɛ se fana ka jaabi caman ɲɔgɔnna caman lawuli aw ka yɔrɔw walima aw ka nafamafɛnw na. An ka misali ta an ka jaabi sɛbɛnni ɲɔgɔndan nafamayɔrɔw la an bɛ yɔrɔ min na an bɛ @eachlupu dɔ ɲagami $grid-breakpointsSass karti kama ni media ɲininkali dɔ ye min kɔnɔ.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Ni i ka kan ka i ka , i ka fɛn caman sɛmɛntiya $grid-breakpoints, i ka fɛn caman Changements bɛna kɛ ka ɲɛsin loop bɛɛ ma minnu bɛ segin-ka-bɔ o karti kan.

CSS bεε bεε bε bεn

Bootstrap 4 bɛ CSS ladamucogo (variables) tan ni fila ɲɔgɔn Dòn a ka CSS lajɛlen kɔnɔ. Olu bɛ nafaw sɔrɔ nɔgɔya la minnu bɛ kɛ ka caya i n’a fɔ an ka barokun kulɛriw, kariyɔrɔw, ani sɛbɛnnibolo fɔlɔw kuluw ni i bɛ baara kɛ i ka navigatɔrɔ ka Inspecteur kɔnɔ, kode sandbox kɔnɔ, walima prototyping caman na.

Yɛlɛma minnu bɛ sɔrɔ

An bɛ fɛn minnu Blà ɲɔgɔn na, olu filɛ nin ye (a kɔlɔsi ko the :rootis required). U bɛ sɔrɔ an ka _root.scssdosiye kɔnɔ.

: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", "Liberation 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;
}

Misaliw

CSS bεε bε Se ka bεnkansεbεn di ni Sass ka bεnkanw ye, nka k’a sɔrɔ u mago tε ɲɔgɔndan na sani u ka Di navigatɔrɔ ma. Misali la, yan an bɛ an ka ɲɛ in sɛbɛnnibolow ni jɛgɛncogo cogoyaw Lasegin ni CSS fɛn caman sɛgɛsɛgɛli ye.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Breakpoint bεε bε bεn

Hali n’an ye kariyɔrɔw Dòn an ka CSS fɛn caman sɛgɛsɛgɛli la fɔlɔ (misali la, --breakpoint-md), ninnu tɛ Dɛmɛ kunnafonidilanw ɲininkaliw la , nka u bɛ Se ka baara Kɛ hali bi sariyaw kɔnɔ kunnafonidilanw ɲininkaliw la. O bεnkansεbεnw bε To CSS lajɛlen kɔnɔ walasa ka kɔ̀rɔbalen Kɛ k’a da a kan u bɛ Se ka baara Kɛ ni JavaScript ye. Aw ye kunnafoni wɛrɛw sɔrɔ spec kɔnɔ .

Fɛn minnu tɛ dɛmɛ sɔrɔ , olu misali dɔ filɛ nin ye :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Wa min bɛ dɛmɛ sɔrɔ, o misali dɔ filɛ nin ye:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}