in English

Mowzuk

Bootstrap 4-i aňsat mowzuk we komponent üýtgeşmeleri üçin global stil ileri tutmalary üçin täze gurlan Sass üýtgeýjilerimiz bilen özleşdiriň.

Giriş

“Bootstrap 3” -de mowzuk, esasan, LESS-de üýtgeýän goşmaçalar, adaty CSS we distfaýllarymyza goşan aýratyn mowzuk stil sahypasy bilen dolandyryldy. Käbir tagallalar bilen, esasy faýllara degmezden Bootstrap 3-iň görnüşini düýbünden täzeden düzüp bolýardy. “Bootstrap 4” tanyş, ýöne birneme üýtgeşik çemeleşmäni üpjün edýär.

Indi tema Sass üýtgeýjileri, Sass kartalary we adaty CSS tarapyndan ýerine ýetirilýär. Mundan başga-da bagyşlanan mowzuk stil sahypasy ýok; ýerine, gurlan mowzugy gradiýentleri, kölegeleri we başgalary goşup bilersiňiz.

Sass

Öz aktiw turbageçirijiňiz bilen Sass düzülende üýtgeýänlerden, kartalardan, garyndylardan we başga zatlardan peýdalanmak üçin çeşmämiz Sass faýllaryndan peýdalanyň .

Faýl gurluşy

Mümkin boldugyça Bootstrap-yň esasy faýllaryny üýtgetmekden gaça duruň. Sass üçin, “Bootstrap” -y import edip, üýtgedip we giňeldip boljak öz stil tablisasyny döretmegi aňladýar. Npm ýaly paket dolandyryjysyny ulanýarsyňyz öýdýän, size meňzeş faýl gurluşy bolar:

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

Çeşme faýllarymyzy göçürip alan bolsaňyz we paket dolandyryjysyny ulanmaýan bolsaňyz, “Bootstrap” -yň deslapky faýllaryny özüňizden aýry saklap, şol gurluşa meňzeş bir zady el bilen gurnamak islärsiňiz.

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

Import

Özüňizde custom.scss, Bootstrap-yň çeşmesi Sass faýllaryny import edersiňiz. Sizde iki wariant bar: “Bootstrap” -yň hemmesini goşuň ýa-da zerur bölekleri saýlaň. Komponentlerimizde käbir talaplaryň we garaşlylygyň bardygyny bilseňizem, ikinjisini höweslendirýäris. Şeýle hem, pluginlerimiz üçin käbir JavaScript-i goşmaly bolarsyňyz.

// 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";

Şol gurnama ýerinde, Sass üýtgeýjileriniň we kartalaryňyzyň islendik birini üýtgedip bilersiňiz custom.scss. Şeýle hem, “Bootstrap” -yň böleklerini zerur bolanda bölümiň aşagyna goşup bilersiňiz // Optional. Faýlymyzdan doly import bootstrap.scssnokadyny başlangyç nokat hökmünde ulanmagy maslahat berýäris.

Üýtgeýän defoltlar

Bootstrap-daky her Sass üýtgeýjisi, Bootstrap- !defaultyň deslapky koduny üýtgetmän üýtgeýjiniň deslapky bahasyny öz Sass-da üýtgetmäge mümkinçilik berýän baýdagy öz içine alýar. Zerur bolanda üýtgeýjileri göçüriň we goýuň, bahalaryny üýtgediň we !defaultbaýdagy aýyryň. Bir üýtgeýji eýýäm bellenen bolsa, Bootstrap-daky deslapky bahalar bilen täzeden bellenmez.

“Bootstrap” üýtgeýjileriniň doly sanawyny tapyp bilersiňiz scss/_variables.scss. Käbir üýtgeýjiler düzüldi null, bu üýtgeýjiler konfigurasiýaňyzda artykmaç ýazylmasa, emläk çykarmaýar.

Üýtgeýän goşmaçalar, funksiýalarymyz, üýtgeýjilerimiz we garyndylarymyz import edilenden soň, ýöne galan importdan öň gelmeli.

Ine, “Bootstrap” -y npm arkaly import edende we düzeninde üýtgedýän bir mysal background-color:color<body>

@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

Aşakdaky global opsiýalary goşmak bilen Bootstrap-daky islendik üýtgeýji üçin zerur bolanda gaýtalaň.

Başlangyç taslamamyz bilen npm arkaly Bootstrap bilen başlaň! Bootstrap-y öz npm proýektiňizde nädip gurmalydygyny we sazlamalydygyny görmek üçin twbs / bootstrap-npm-starter şablon ammaryna başlaň. Sass düzüjisi, Autoprefixer, Stylelint, PurgeCSS we Bootstrap nyşanlaryny öz içine alýar.

Kartalar we aýlawlar

“Bootstrap 4”, degişli CSS maşgalalaryny döretmegi aňsatlaşdyrýan Sass kartalaryny, esasy baha jübütlerini öz içine alýar. Sass kartalaryny reňklerimiz, gözenek nokatlarymyz we başgalar üçin ulanýarys. Sass üýtgeýjileri ýaly, Sass kartalarynyň hemmesinde !defaultbaýdak bar we ýokaşdyrylyp we uzaldylyp bilner.

Sass kartalarymyzyň käbiri adaty ýagdaýda boş kartalara birleşdirilýär. Bu berlen Sass kartasyny aňsat giňeltmek üçin edilýär, ýöne kartadan zatlary aýyrmagy birneme kynlaşdyrýar.

Kartany üýtgediň

Kartamyzda bar bolan reňki üýtgetmek üçin $theme-colors, Sass faýlyňyza aşakdakylary goşuň:

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

Karta goşuň

Täze reňk $theme-colorsgoşmak üçin täze açary we baha goşuň:

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

Kartadan aýyryň

$theme-colorsReňkleri ýa-da başga kartadan aýyrmak üçin ulanyň map-remove. Talaplarymyzyň we wariantlarymyzyň arasynda goýmalydygyňyzy biliň:

// 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";
...

Gerekli düwmeler

“Bootstrap”, Sass kartalarynda käbir aýratyn düwmeleriň bardygyny göz öňünde tutýarys we ulanýarys. Goşulan kartalary özleşdireniňizde, Sass kartasynyň belli bir açary ulanylýan ýalňyşlyklara duş gelip bilersiňiz.

Mysal üçin, baglanyşyklardan, düwmelerden we forma ýagdaýlaryndan, primarywe successdüwmelerini dangerulanýarys . $theme-colorsBu düwmeleriň bahalaryny çalyşmak hiç hili mesele döretmeli däldir, ýöne olary aýyrmak Sass düzmek meselesine sebäp bolup biler. Bu ýagdaýlarda, şol bahalardan peýdalanýan Sass koduny üýtgetmeli bolarsyňyz.

Funksiýalar

“Bootstrap” birnäçe Sass funksiýasyny ulanýar, ýöne umumy mowzuklara diňe bir bölek ulanylýar. Reňk kartalaryndan baha almak üçin üç funksiýany goşduk:

@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);
}

Bular, Sass kartasyndan v3-den reňk üýtgeýjisini nähili ulanjakdygyňyz ýaly bir reňk saýlamaga mümkinçilik berýär.

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

Şeýle hem , kartadan belli bir reňk almak üçin başga bir wezipämiz bar. $theme-colorsAtivearamaz derejeli bahalar reňkini ýeňilleşdirer, has ýokary derejeler bolsa garalar.

@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);
}

Iş ýüzünde, funksiýa jaň edip, iki parametrden geçersiňiz: reňkiň ady $theme-colors(mysal üçin, başlangyç ýa-da howp) we san derejesinden.

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

Geljekde goşmaça funksiýalar ýa-da goşmaça Sass kartalary üçin derejeli funksiýalary döretmek üçin öz aýratyn Sassyňyzy goşup bilersiňiz, ýa-da has sözli bolmak isleseňiz, umumy funksiýalary.

Reňk tapawudy

“Bootstrap” -a goşýan goşmaça funksiýamyz, reňk kontrast funksiýasydyr color-yiq. Görkezilen esasy reňk esasynda açyk ( ) ýa-da gara ( ) kontrast reňkini awtomatiki gaýtarmak üçin YIQ reňk giňişligini ulanýar. Bu funksiýa, köp synp döredýän ýeriňizde garyndylar ýa-da aýlawlar üçin aýratyn peýdalydyr.#fff#111

Mysal üçin, $theme-colorskartamyzdan reňk çalyşmalary döretmek üçin:

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

Şeýle hem bir gezeklik kontrast zerurlyklary üçin ulanylyp bilner:

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

Şeýle hem, reňk karta funksiýalarymyz bilen esasy reňk kesgitläp bilersiňiz:

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

SVG-den gaçyň

escape-svgSVG fon suratlary üçin nyşanlary <we >nyşanlary ulanýarys . #IE-de fon suratlaryny dogry görkezmek üçin bu simwollardan gaçmaly. Funksiýa ulanylanda escape-svgmaglumatlar URI-lerini getirmeli.

Funksiýalary goşuň we aýyryň

CSS funksiýasyny ýapmak üçin addwe funksiýalary ulanýarys . Bu funksiýalaryň esasy maksady, “birliksiz” baha aňlatma geçirilende ýalňyşlyklardan gaça durmakdyr. Şuňa meňzeş aňlatmalar , matematiki taýdan dogrydygyna garamazdan, ähli brauzerlerde ýalňyşlyk getirer.subtractcalc0calccalc(10px - 0)

Hasaplamanyň dogry ýerinde mysal:

$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);
}

Hasaplamanyň nädogrydygyna mysal:

$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 görnüşleri

Içindäki üýtgeýän üýtgeýjiler faýlymyz bilen Bootstrap 4-i özüňiz düzüň we täze $enable-*Sass üýtgeýjileri bilen global CSS saýlawlaryny aňsatlyk bilen üýtgediň. Üýtgeýjiniň bahasyny ýok ediň we npm run testzerur bolanda täzeden düzüň.

scss/_variables.scssBootstrap faýlynda esasy global opsiýalar üçin bu üýtgeýjileri tapyp we sazlap bilersiňiz .

Üýtgeýji	Gymmatlyklar	Düşündiriş
`$spacer`	`1rem`(gaýybana), ýa-da islendik baha> 0	Kosmos enjamlarymyzy programma taýdan döretmek üçin deslapky spacer bahasyny kesgitleýär .
`$enable-rounded`	`true`(default) ýa-da`false`	`border-radius`Dürli komponentlerde öňünden kesgitlenen stilleri üpjün edýär.
`$enable-shadows`	`true`ýa-da `false`(gaýybana)	`box-shadow`Dürli komponentlerde öňünden kesgitlenen bezeg stillerini üpjün edýär. `box-shadow`Fokus ýagdaýlary üçin ulanylýanlara täsir etmeýär .
`$enable-gradients`	`true`ýa-da `false`(gaýybana)	`background-image`Dürli komponentlerdäki stiller arkaly öňünden kesgitlenen gradiýentleri üpjün edýär.
`$enable-transitions`	`true`(default) ýa-da`false`	`transition`Dürli komponentlerde öňünden kesgitlenenleri işledýär .
`$enable-prefers-reduced-motion-media-query`	`true`(default) ýa-da`false`	Ulanyjylaryň brauzeri / operasiýa ulgamy ileri tutmalaryna esaslanýan käbir animasiýalary / geçişleri basyp ýatyrýan `prefers-reduced-motion`media talaplaryna mümkinçilik berýär .
`$enable-hover-media-query`	`true`ýa-da `false`(gaýybana)	Könelişen
`$enable-grid-classes`	`true`(default) ýa-da`false`	Tor ulgamy üçin ( meselem `.container`, we ş.m.) CSS synplaryny döretmäge mümkinçilik berýär .`.row.col-md-1`
`$enable-caret`	`true`(default) ýa-da`false`	Pseudo elementini ideg etmäge mümkinçilik berýär `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(default) ýa-da`false`	Maýyp däl düwme elementlerine “el” kursory goşuň.
`$enable-print-styles`	`true`(default) ýa-da`false`	Çap etmegi optimizirlemegiň stillerine mümkinçilik berýär.
`$enable-responsive-font-sizes`	`true`ýa-da `false`(gaýybana)	Şrift ölçeglerine jogap berýär .
`$enable-validation-icons`	`true`(default) ýa-da`false`	Tekst `background-image`girişleriniň içindäki nyşanlary we tassyklama ýagdaýlary üçin käbir ýörite formalary açýar.
`$enable-deprecation-messages`	`true`(default) ýa-da`false`	`false`Aýyrylmagy meýilleşdirilýän könelen garyndylary we funksiýalary ulananyňyzda duýduryşlary gizlemek üçin düzüň `v5`.

Reňk

“Bootstrap” -yň dürli komponentleriniň we hyzmatlarynyň köpüsi Sass kartasynda kesgitlenen reňkleriň üsti bilen gurulýar. Bu kartany birneme düzgüni çalt döretmek üçin Sass-da aýlap bolýar.

Colorshli reňkler

Bootstrap 4-de bar reňkler Sass üýtgeýjileri we scss/_variables.scssfaýlda Sass kartasy hökmünde elýeterlidir. Bu, indiki kiçijik goýberişlerde, eýýäm girizen çal reňk palitrasy ýaly goşmaça kölegeleri goşmak üçin giňeldiler .

$ gök # 007bff

$ indigo # 6610f2

$ gyrmyzy # 6f42c1

$ gülgüne # e83e8c

$ gyzyl # dc3545

$ apelsin # fd7e14

$ sary # ffc107

$ ýaşyl # 28a745

$ çaý # 20c997

$ sian # 17a2b8

Sass-da bulary nädip ulanyp bilersiňiz:

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

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

Reňk peýdaly sapaklary sazlamak colorwe background-color.

Geljekde aşakdaky çal reňkli reňkler bilen edişimiz ýaly Sass kartalaryny we her reňkdäki kölegeler üçin üýtgeýjileri üpjün etmegi maksat edinýäris.

Mowzuk reňkleri

Reňk shemalaryny döretmek üçin has kiçi reňk palitrasyny döretmek üçin ähli reňkleriň bir bölegini ulanýarys, Sass üýtgeýjileri we Bootstrap scss/_variables.scssfaýlynda Sass kartasy.

$ başlangyç # 007bff

$ ikinji # 6c757d

$ üstünlik # 28a745

$ howp # dc3545

$ duýduryş # ffc107

$ maglumat # 17a2b8

$ ýagtylyk # f8f9fa

$ garaňky # 343a40

Çal reňk

scss/_variables.scssTaslamaňyzda çal reňkleriň yzygiderli reňkleri üçin çal üýtgeýänleriň giň toplumy we Sass kartasy . Bularyň bitarap çal däl-de, inçe gök äheňe gönükdirilen “salkyn çal” dygyna üns beriň.

$ çal-100 # f8f9fa

$ 200 # e9ecef

çal-300 $ # dee2e6

çal-400 $ # ced4da

çal-500 $ # adb5bd

çal-600 $ # 6c757d

çal-700 $ # 495057

çal-800 $ # 343a40

çal-900 $ # 212529

Içinde scss/_variables.scssBootstrap reňk üýtgeýjilerini we Sass kartasyny taparsyňyz. $colorsSass kartasynyň mysaly :

$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;

Kartanyň içindäki bahalary goşuň, aýyryň ýa-da üýtgediň, beýleki köp böleklerde ulanylyşyny täzeläň. Gynansagam, häzirki wagtda her bir komponent bu Sass kartasyny ulanmaýar. Geljekdäki täzelenmeler bu meselede gowulaşmaga çalyşar. Oňa çenli ${color}üýtgeýänleri we bu Sass kartasyny ulanmagy meýilleşdiriň.

Komponentler

“Bootstrap” -yň köp bölekleri we kömekçi enjamlary @eachSass kartasynyň üstünde gaýtalanýan aýlawlar bilen gurlupdyr. Bu, esasanam, bir komponentiň $theme-colorswariantlaryny döretmek we her bölek üçin täsirli wariantlary döretmek üçin peýdalydyr. Bu Sass kartalaryny özleşdirip, täzeden düzeniňizde, üýtgeşmeleriňiziň bu aýlawlarda görkezilýändigini awtomatiki görersiňiz.

Üýtgeýjiler

“Bootstrap” -yň köp bölegi esasy üýtgediji synp çemeleşmesi bilen gurlupdyr. Diýmek, stiliň esasy bölegi esasy synpda (meselem .btn), stil üýtgeýjileri üýtgediji synplar bilen çäklenýär (meselem .btn-danger). $theme-colorsBu üýtgediji synplar, üýtgediji synplarymyzyň sanyny we adyny sazlamak üçin kartadan gurulýar .

Ine, komponente we ähli fon hyzmatlaryna $theme-colorsüýtgeýjiler döretmek üçin kartanyň üstünden nädip aýlanýandygymyzyň iki mysaly ..alert.bg-*

// 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);
}

Jogapkärçilikli

Bu Sass aýlawlary reňk kartalary bilen çäklenmeýär. Şeýle hem, komponentleriňiziň ýa-da hyzmatlaryňyzyň täsirli üýtgeşmelerini döredip bilersiňiz. Mysal üçin @each, Sass kartasy üçin bir aýlawy $grid-breakpointsmedia talaplary bilen garyşdyrýan täsirli tekst deňleşdiriş hyzmatlarymyzy alyň.

@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; }
  }
}

Üýtgetmeli bolsaňyz $grid-breakpoints, üýtgetmeleriňiz şol kartanyň üstünde gaýtalanýan aýlawlara degişlidir.

CSS üýtgeýjileri

“Bootstrap 4 ”, düzülen CSS-de takmynan 20 sany CSS aýratyn häsiýetini (üýtgeýänleri) öz içine alýar. Bular, brauzeriňiziň inspektorynda, kod sandyk gutusynda ýa-da umumy prototip görnüşinde işleýän wagtyňyz, mowzuk reňklerimiz, bölek nokatlarymyz we esasy şrift ýazgylary ýaly giňden ulanylýan bahalara aňsat girýär.

Elýeterli üýtgeýjiler

Ine, goşýan üýtgeýjilerimiz ( :rootzerurdygyny belläň). Olar biziň _root.scssfaýlymyzda ýerleşýär.

: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;
}

Mysallar

CSS üýtgeýjileri Sassyň üýtgeýjilerine meňzeş çeýeligi hödürleýär, ýöne brauzere hyzmat etmezden ozal düzmek zerurlygy ýok. Mysal üçin, bu ýerde sahypamyzyň şriftini we CSS üýtgeýjileri bilen baglanyşyk stillerini täzeden düzýäris.

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

Bölüm nokady üýtgeýjileri

Ilkibaşda CSS üýtgeýjilerimize bölek nokatlaryny goşsak-da --breakpoint-md, bular media talaplarynda goldanylmaýar , ýöne olar media talaplarynda düzgünleriň çäginde ulanylyp bilner. Bu aralyk üýtgeýjiler, JavaScript tarapyndan ulanylyp bilinjekdigini göz öňünde tutup, yza gabat gelmek üçin düzülen CSS-de galýar. Aýratynlykda has giňişleýin öwreniň .

Goldaw berilmeýän zadyň mysaly :

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

Goldaýan zadyň mysaly :

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