in English

Theming Bootstrap

Ṣe akanṣe Bootstrap 4 pẹlu awọn oniyipada Sass tuntun ti a ṣe sinu fun awọn ayanfẹ ara agbaye fun akori irọrun ati awọn iyipada paati.

Ifaara

Ni Bootstrap 3, akori jẹ idari pupọ nipasẹ awọn ifasilẹ oniyipada ni LESS, aṣa CSS, ati aṣa ara akori ọtọtọ ti a fi sinu awọn distfaili wa. Pẹlu igbiyanju diẹ, ọkan le ṣe atunṣe iwo Bootstrap 3 patapata laisi fọwọkan awọn faili pataki. Bootstrap 4 n pese ọna ti o mọ, ṣugbọn ọna ti o yatọ diẹ.

Ni bayi, akori jẹ aṣeyọri nipasẹ awọn oniyipada Sass, awọn maapu Sass, ati CSS aṣa. Nibẹ ni ko si siwaju sii igbẹhin akori stylesheet; dipo, o le jeki akori ti a ṣe sinu lati ṣafikun awọn gradients, awọn ojiji, ati diẹ sii.

Sass

Lo awọn faili Sass orisun wa lati lo anfani awọn oniyipada, awọn maapu, awọn alapọpọ, ati diẹ sii nigbati o ba n ṣajọ Sass nipa lilo opo gigun ti epo dukia tirẹ.

Ilana faili

Nigbakugba ti o ba ṣeeṣe, yago fun iyipada awọn faili pataki Bootstrap. Fun Sass, iyẹn tumọ si ṣiṣẹda iwe aṣa tirẹ ti o gbe Bootstrap wọle ki o le yipada ki o fa sii. Ti o ba ro pe o nlo oluṣakoso package bi npm, iwọ yoo ni eto faili ti o dabi eyi:

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

Ti o ba ti ṣe igbasilẹ awọn faili orisun wa ati pe ko lo oluṣakoso package, iwọ yoo fẹ lati ṣeto nkan ti o jọra si eto yẹn, titọju awọn faili orisun Bootstrap lọtọ si tirẹ.

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

Gbigbe wọle

Ninu rẹ custom.scss, iwọ yoo gbe awọn faili Sass orisun Bootstrap wọle. O ni awọn aṣayan meji: pẹlu gbogbo Bootstrap, tabi mu awọn ẹya ti o nilo. A ṣe iwuri fun igbehin, botilẹjẹpe akiyesi pe awọn ibeere ati awọn igbẹkẹle wa kọja awọn paati wa. Iwọ yoo tun nilo lati ni diẹ ninu JavaScript fun awọn afikun wa.

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

Pẹlu iṣeto yẹn ni aye, o le bẹrẹ lati yipada eyikeyi ninu awọn oniyipada Sass ati awọn maapu ninu faili custom.scss. O tun le bẹrẹ lati ṣafikun awọn ẹya Bootstrap labẹ // Optionalapakan bi o ṣe nilo. A daba ni lilo akopọ agbewọle ni kikun lati bootstrap.scssfaili wa bi aaye ibẹrẹ rẹ.

Ayipada aiyipada

Gbogbo oniyipada Sass ni Bootstrap pẹlu !defaultasia ti o fun ọ laaye lati yiyipada iye aiyipada ti oniyipada ninu Sass tirẹ laisi iyipada koodu orisun Bootstrap. Daakọ ati lẹẹmọ awọn oniyipada bi o ṣe nilo, yi awọn iye wọn pada, ki o yọ !defaultasia kuro. Ti o ba ti yan oniyipada kan tẹlẹ, lẹhinna kii yoo tun fi sọtọ nipasẹ awọn iye aiyipada ni Bootstrap.

Iwọ yoo wa atokọ pipe ti awọn oniyipada Bootstrap ni scss/_variables.scss. Diẹ ninu awọn oniyipada ti ṣeto si null, awọn oniyipada wọnyi ko jade ohun-ini ayafi ti wọn ba bori ninu iṣeto rẹ.

Ayipada iyipada gbọdọ wa lẹhin awọn iṣẹ wa, awọn oniyipada, ati awọn akojọpọ ti wa ni agbewọle, ṣugbọn ṣaaju awọn agbewọle to ku.

Eyi ni apẹẹrẹ ti o yipada background-colorati colorfun <body>nigba gbigbe wọle ati ṣajọ Bootstrap nipasẹ npm:

@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

Tun ṣe pataki fun eyikeyi oniyipada ni Bootstrap, pẹlu awọn aṣayan agbaye ni isalẹ.

Bẹrẹ pẹlu Bootstrap nipasẹ npm pẹlu iṣẹ ibẹrẹ wa! Ori si ibi ipamọ awoṣe twbs/bootstrap-npm-starter lati wo bi o ṣe le kọ ati ṣe akanṣe Bootstrap ninu iṣẹ akanṣe npm tirẹ. Pẹlu alakojo Sass, Autoprefixer, Stylelint, PurgeCSS, ati Awọn aami Bootstrap.

Awọn maapu ati awọn losiwajulosehin

Bootstrap 4 pẹlu iwonba awọn maapu Sass, awọn orisii iye bọtini ti o jẹ ki o rọrun lati ṣe ipilẹṣẹ awọn idile ti CSS ti o ni ibatan. A lo awọn maapu Sass fun awọn awọ wa, awọn aaye fifọ grid, ati diẹ sii. Gẹgẹ bii awọn oniyipada Sass, gbogbo awọn maapu Sass pẹlu !defaultasia ati pe o le bori ati faagun.

Diẹ ninu awọn maapu Sass wa ti dapọ si awọn ti o ṣofo nipasẹ aiyipada. Eyi ni a ṣe lati gba imugboroja irọrun ti maapu Sass ti a fun, ṣugbọn o wa ni idiyele ti ṣiṣe yiyọ awọn ohun kan kuro lati maapu kan ni iṣoro diẹ sii.

Ṣe atunṣe maapu

Lati ṣatunkọ awọ to wa tẹlẹ ninu $theme-colorsmaapu wa, ṣafikun atẹle naa si faili Sass aṣa rẹ:

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

Fi kun si maapu

Lati ṣafikun awọ tuntun si $theme-colors, ṣafikun bọtini titun ati iye:

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

Yọọ kuro ni maapu

Lati yọ awọn awọ kuro lati $theme-colors, tabi eyikeyi maapu miiran, lo map-remove. Mọ pe o gbọdọ fi sii laarin awọn ibeere ati awọn aṣayan wa:

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

Awọn bọtini ti a beere

Bootstrap dawọle wiwa diẹ ninu awọn bọtini kan pato laarin awọn maapu Sass bi a ṣe lo ati fa awọn wọnyi funrara wa. Bi o ṣe n ṣatunṣe awọn maapu to wa, o le ba pade awọn aṣiṣe nibiti o ti nlo bọtini maapu Sass kan pato.

Fun apẹẹrẹ, a lo primary, success, ati dangerawọn bọtini lati $theme-colorsfun awọn ọna asopọ, awọn bọtini, ati awọn ipinlẹ fọọmu. Rirọpo awọn iye ti awọn bọtini wọnyi ko yẹ ki o ṣafihan awọn ọran kankan, ṣugbọn yiyọ wọn le fa awọn ọran akojọpọ Sass. Ni awọn iṣẹlẹ wọnyi, iwọ yoo nilo lati yipada koodu Sass ti o lo awọn iye wọnyẹn.

Awọn iṣẹ

Bootstrap nlo awọn iṣẹ Sass pupọ, ṣugbọn ipin kan nikan ni o wulo fun akori gbogbogbo. A ti ṣafikun awọn iṣẹ mẹta fun gbigba awọn iye lati awọn maapu awọ:

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

Iwọnyi gba ọ laaye lati mu awọ kan lati maapu Sass kan bii bii o ṣe le lo oniyipada awọ lati v3.

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

A tun ni iṣẹ miiran fun gbigba ipele awọ kan pato lati $theme-colorsmaapu naa. Awọn iye ipele odi yoo tan awọ naa, lakoko ti awọn ipele ti o ga julọ yoo ṣokunkun.

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

Ni iṣe, iwọ yoo pe iṣẹ naa ki o kọja ni awọn aye meji: orukọ awọ lati $theme-colors(fun apẹẹrẹ, akọkọ tabi eewu) ati ipele nọmba kan.

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

Awọn iṣẹ afikun le ṣe afikun ni ọjọ iwaju tabi aṣa Sass tirẹ lati ṣẹda awọn iṣẹ ipele fun awọn maapu Sass afikun, tabi paapaa jeneriki ti o ba fẹ lati jẹ ọrọ-ọrọ diẹ sii.

Iyatọ awọ

Iṣẹ afikun ti a ni ninu Bootstrap jẹ iṣẹ itansan awọ, color-yiq. O nlo aaye awọ YIQ lati da ina kan pada laifọwọyi ( #fff) tabi dudu ( #111) awọ itansan ti o da lori awọ ipilẹ ti a sọ. Iṣẹ yii wulo paapaa fun awọn apopọ tabi awọn losiwajulosehin nibiti o ti n ṣe agbekalẹ awọn kilasi pupọ.

Fun apẹẹrẹ, lati ṣe agbejade awọn swatches awọ lati $theme-colorsmaapu wa:

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

O tun le ṣee lo fun awọn iwulo itansan ọkan-pipa:

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

O tun le pato awọ ipilẹ kan pẹlu awọn iṣẹ maapu awọ wa:

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

Sa SVG

A lo escape-svgiṣẹ naa lati sa fun <, >ati #awọn kikọ fun awọn aworan abẹlẹ SVG. Awọn ohun kikọ wọnyi nilo lati salọ lati ṣe daradara awọn aworan abẹlẹ ni IE. Nigbati o ba nlo escape-svgiṣẹ naa, awọn URI data gbọdọ jẹ agbasọ.

Fikun-un ati Yọ awọn iṣẹ kuro

A lo addati awọn subtractiṣẹ lati fi ipari si iṣẹ CSS calc. Idi akọkọ ti awọn iṣẹ wọnyi ni lati yago fun awọn aṣiṣe nigbati iye “unitless” 0ti kọja sinu calcikosile kan. Awọn ikosile bii calc(10px - 0)yoo da aṣiṣe pada ni gbogbo awọn aṣawakiri, botilẹjẹpe o jẹ deede ni mathematiki.

Apẹẹrẹ nibiti calc ti wulo:

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

Apẹẹrẹ nibiti calc ko wulo:

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

Awọn aṣayan Sass

Ṣe akanṣe Bootstrap 4 pẹlu faili awọn oniyipada aṣa ti a ṣe sinu ati irọrun yi awọn ayanfẹ CSS agbaye pẹlu awọn $enable-*oniyipada Sass tuntun. Fojusi iye oniyipada ki o tun ṣajọpọ pẹlu npm run testbi o ṣe nilo.

O le wa ati ṣe akanṣe awọn oniyipada wọnyi fun awọn aṣayan agbaye bọtini ni scss/_variables.scssfaili Bootstrap.

Ayípadà Awọn iye Apejuwe
$spacer 1rem(aiyipada), tabi eyikeyi iye> 0 Ni pato iye alafo aiyipada lati ṣe ipilẹṣẹ awọn ohun elo spacer wa ni eto .
$enable-rounded true(aiyipada) tabifalse Mu awọn aza ti a ti yan tẹlẹ border-radiusṣiṣẹ lori oriṣiriṣi awọn paati.
$enable-shadows truetabi false(aiyipada) Nṣiṣẹ awọn aza ohun ọṣọ ti a ti sọ tẹlẹ box-shadowlori awọn paati oriṣiriṣi. Ko ni ipa lori box-shadows ti a lo fun awọn ipinlẹ idojukọ.
$enable-gradients truetabi false(aiyipada) Mu awọn gradients ti a ti sọ tẹlẹ ṣiṣẹ nipasẹ background-imageawọn aza lori ọpọlọpọ awọn paati.
$enable-transitions true(aiyipada) tabifalse Mu awọn ti a ti yan tẹlẹ transitionṣiṣẹ lori awọn paati oriṣiriṣi.
$enable-prefers-reduced-motion-media-query true(aiyipada) tabifalse Mu prefers-reduced-motionibeere media ṣiṣẹ , eyiti o dinku awọn ohun idanilaraya kan/awọn iyipada ti o da lori awọn ayanfẹ ẹrọ aṣawakiri/ẹrọ awọn olumulo.
$enable-hover-media-query truetabi false(aiyipada) Idinku
$enable-grid-classes true(aiyipada) tabifalse Mu ki iran ti awọn kilasi CSS ṣiṣẹ fun eto akoj (fun apẹẹrẹ,,,,, ati .containerbẹbẹ lọ)..row.col-md-1
$enable-caret true(aiyipada) tabifalse Nṣiṣẹ itọju apilẹṣẹ ano lori .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(aiyipada) tabifalse Ṣafikun kọsọ “ọwọ” si awọn eroja bọtini ti kii ṣe alaabo.
$enable-print-styles true(aiyipada) tabifalse Nṣiṣẹ awọn aza fun mimuju iwọn titẹ sita.
$enable-responsive-font-sizes truetabi false(aiyipada) Mu awọn iwọn fonti idahun ṣiṣẹ .
$enable-validation-icons true(aiyipada) tabifalse Mu background-imageawọn aami ṣiṣẹ laarin awọn igbewọle ọrọ ati diẹ ninu awọn fọọmu aṣa fun awọn ipinlẹ afọwọsi.
$enable-deprecation-messages true(aiyipada) tabifalse Ṣeto lati falsetọju awọn ikilọ nigba lilo eyikeyi awọn alapọpọ ati awọn iṣẹ ṣiṣe ti a ti pinnu lati yọkuro ninu v5.

Àwọ̀

Pupọ ti awọn oriṣiriṣi awọn paati ati awọn ohun elo Bootstrap ni a kọ nipasẹ lẹsẹsẹ awọn awọ ti a ṣalaye ni maapu Sass kan. Maapu yii le wa ni yipo ni Sass lati ṣe agbekalẹ lẹsẹsẹ awọn ilana ofin ni kiakia.

Gbogbo awọn awọ

Gbogbo awọn awọ ti o wa ni Bootstrap 4, wa bi awọn oniyipada Sass ati maapu Sass ninu scss/_variables.scssfaili. Eyi yoo faagun ni awọn idasilẹ kekere ti o tẹle lati ṣafikun awọn iboji afikun, pupọ bii paleti grẹy ti a pẹlu tẹlẹ.

$bulu #007bff
$indigo # 6610f2
$ eleyi ti # 6f42c1
$ Pink #e83e8c
$pupa #dc3545
$ọsan #fd7e14
$ ofeefee #ffc107
$ alawọ ewe #28a745
$teli #20c997
$ cyan #17a2b8

Eyi ni bii o ṣe le lo awọn wọnyi ninu Sass rẹ:

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

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

Awọn kilasi IwUlO awọ tun wa fun tito colorati background-color.

Ni ọjọ iwaju, a yoo ṣe ifọkansi lati pese awọn maapu Sass ati awọn oniyipada fun awọn ojiji ti awọ kọọkan bi a ti ṣe pẹlu awọn awọ grẹy ni isalẹ.

Awọn awọ akori

A lo ipin kan ti gbogbo awọn awọ lati ṣẹda paleti awọ ti o kere fun ṣiṣẹda awọn ero awọ, tun wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scssfaili Bootstrap.

$ jc #007bff
$ keji #6c757d
$ aseyori #28a745
ewu $ #dc3545
$ ìkìlọ #ffc107
alaye $ #17a2b8
Imọlẹ $ #f8f9fa
$òkunkun #343a40

Grẹy

Eto ti o gbooro ti awọn oniyipada grẹy ati maapu Sass kan scss/_variables.scssfun awọn ojiji grẹy dédé kọja iṣẹ akanṣe rẹ. Ṣe akiyesi pe iwọnyi jẹ “awọn grẹy tutu”, eyiti o ṣọna si ohun orin buluu ti o ni arekereke, dipo awọn grẹy didoju.

$ grẹy-100 #f8f9fa
$ grẹy-200 #e9ecef
$ grẹy-300 #dee2e6
$ grẹy-400 #ced4da
$ grẹy-500 #adb5bd
$ grẹy-600 #6c757d
$ grẹy-700 # 495057
$ grẹy-800 #343a40
$ grẹy-900 # 212529

Ninu scss/_variables.scss, iwọ yoo rii awọn oniyipada awọ Bootstrap ati maapu Sass. Eyi ni apẹẹrẹ ti $colorsmaapu Sass:

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

Ṣafikun, yọkuro, tabi ṣatunṣe awọn iye laarin maapu lati ṣe imudojuiwọn bi wọn ṣe nlo ni ọpọlọpọ awọn paati miiran. Laanu ni akoko yii, kii ṣe gbogbo paati lo maapu Sass yii. Awọn imudojuiwọn ọjọ iwaju yoo tiraka lati ni ilọsiwaju lori eyi. Titi di igba naa, gbero lori lilo awọn ${color}oniyipada ati maapu Sass yii.

Awọn eroja

Pupọ awọn paati Bootstrap ati awọn ohun elo ti a ṣe pẹlu awọn @eachlosiwajulosehin ti o ṣe atunṣe lori maapu Sass kan. Eyi ṣe iranlọwọ paapaa fun ṣiṣẹda awọn iyatọ ti paati nipasẹ wa $theme-colorsati ṣiṣẹda awọn iyatọ idahun fun aaye fifọ kọọkan. Bi o ṣe n ṣe awọn maapu Sass wọnyi ti o si tun ṣe akopọ, iwọ yoo rii laifọwọyi awọn ayipada rẹ ti farahan ninu awọn yipo wọnyi.

Awọn oluyipada

Ọpọlọpọ awọn paati Bootstrap ni a kọ pẹlu ọna kilasi iyipada-ipilẹ. Eyi tumọ si pupọ julọ ti iselona wa ninu kilasi mimọ (fun apẹẹrẹ, .btn) lakoko ti awọn iyatọ ara wa ni ihamọ si awọn kilasi iyipada (fun apẹẹrẹ, .btn-danger). Awọn kilasi modifier wọnyi ni a kọ lati $theme-colorsmaapu lati ṣe isọdi nọmba ati orukọ awọn kilasi iyipada wa.

Eyi ni awọn apẹẹrẹ meji ti bii a ṣe yipo lori $theme-colorsmaapu lati ṣe ipilẹṣẹ awọn iyipada si .alertpaati ati gbogbo awọn .bg-*ohun elo abẹlẹ wa.

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

Idahun

Awọn yipo Sass wọnyi ko ni opin si awọn maapu awọ, boya. O tun le ṣe ina awọn iyatọ idahun ti awọn paati tabi awọn ohun elo rẹ. Mu fun apẹẹrẹ awọn ohun elo titete ọrọ idahun nibiti a ti dapọ @eachlupu kan fun $grid-breakpointsmaapu Sass pẹlu ibeere media kan pẹlu.

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

Ti o ba nilo lati ṣe atunṣe rẹ $grid-breakpoints, awọn ayipada rẹ yoo kan si gbogbo awọn losiwajulosehin ti n ṣe atunṣe lori maapu yẹn.

CSS oniyipada

Bootstrap 4 pẹlu ni ayika meji mejila mejila awọn ohun-ini aṣa CSS (awọn oniyipada) ninu CSS ti o ṣajọ. Iwọnyi n pese iraye si irọrun si awọn iye ti a lo nigbagbogbo bii awọn awọ akori wa, awọn aaye fifọ, ati awọn akopọ fonti akọkọ nigbati o n ṣiṣẹ ni Oluyewo ẹrọ aṣawakiri rẹ, apoti yanrin koodu kan, tabi afọwọṣe gbogbogbo.

Awọn oniyipada ti o wa

Eyi ni awọn oniyipada ti a pẹlu (akiyesi pe o :rootnilo). Wọn wa ninu _root.scssfaili wa.

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

Awọn apẹẹrẹ

Awọn oniyipada CSS nfunni ni irọrun ti o jọra si awọn oniyipada Sass, ṣugbọn laisi iwulo fun akopọ ṣaaju ki o to ṣiṣẹ si ẹrọ aṣawakiri naa. Fún àpẹrẹ, níhìn-ín a tún ń ṣàtúntò fọ́nǹbù ojú-ewé wa àti àwọn ọ̀nà ìsopọ̀ pẹ̀lú àwọn oniyipada CSS.

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

Breakpoint oniyipada

Lakoko ti a ti kọkọ pẹlu awọn aaye fifọ ni awọn oniyipada CSS wa (fun apẹẹrẹ, --breakpoint-md), awọn wọnyi ko ni atilẹyin ninu awọn ibeere media , ṣugbọn wọn tun le ṣee lo laarin awọn ofin ni awọn ibeere media. Awọn oniyipada ibi fifọ wọnyi wa ninu CSS ti a ṣe akojọpọ fun ibaramu sẹhin ti a fun wọn le jẹ lilo nipasẹ JavaScript. Kọ ẹkọ diẹ sii ni pato .

Eyi ni apẹẹrẹ ti ohun ti ko ṣe atilẹyin:

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

Ati pe eyi ni apẹẹrẹ ti ohun ti o ṣe atilẹyin:

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