in English

Omulamwa Bootstrap

Customize Bootstrap 4 n'enkyukakyuka zaffe empya eza Sass ezizimbibwamu okusobola okwettanira sitayiro y'ensi yonna okusobola okwanguyiza omulamwa n'okukyusa ebitundu.

Okwanjula

Mu Bootstrap 3, theming yasinga kuvugirwa variable overrides mu LESS, custom CSS, ne theme stylesheet ey’enjawulo gye twassaamu mu distfayiro zaffe. Nga waliwo okufuba, omuntu asobola okuddamu okukola ddala endabika ya Bootstrap 3 nga takwata ku fayiro enkulu. Bootstrap 4 ekuwa enkola emanyiddwa, naye nga ya njawulo katono.

Kati, theming etuukirira nga Sass variables, Sass maps, ne custom CSS. Tewali stylesheet ya mulamwa ekyali yeewaddeyo; mu kifo ky’ekyo, osobola okusobozesa omulamwa oguzimbibwamu okwongerako gradients, shadows, n’ebirala.

Sass nga bwe kiri

Kozesa fayiro zaffe eza Sass ez'ensibuko okweyambisa enkyukakyuka, maapu, mixins, n'ebirala nga okuŋŋaanya Sass ng'okozesa payipu yo ey'eby'obugagga.

Ensengeka ya fayiro

Buli lwe kiba kisoboka, weewale okukyusa fayiro za Bootstrap enkulu. Ku Sass, ekyo kitegeeza okukola stylesheet yo eyingiza Bootstrap osobole okugikyusa n’okugigaziya. Nga tufudde nti okozesa package manager nga npm, ojja kuba n'ensengeka ya fayiro eringa eno:

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

Bw’oba ​​owanula fayiro zaffe ez’ensibuko era nga tokozesa muddukanya package, ojja kwagala okuteekawo mu ngalo ekintu ekifaananako n’ensengeka eyo, okukuuma fayiro z’ensibuko za Bootstrap nga zaawukana ku zo.

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

Okuyingiza ebintu mu ggwanga

Mu custom.scss, ojja kuyingiza fayiro za Bootstrap ez'ensibuko Sass. Olina engeri bbiri: ssaamu byonna ebya Bootstrap, oba londa ebitundu by’olina. Tukubiriza eky’oluvannyuma, wadde nga kimanye nti waliwo ebyetaago ebimu n’okwesigamira mu bitundu byaffe byonna. Era ojja kwetaaga okussaamu JavaScript ezimu ku plugins zaffe.

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

Nga ensengeka eyo eri mu kifo, osobola okutandika okukyusa ekintu kyonna ku nkyukakyuka za Sass ne maapu mu custom.scss. Osobola n’okutandika okwongera ebitundu bya Bootstrap wansi // Optionalw’ekitundu nga bwe kyetaagisa. Tukuwa amagezi okukozesa omutambi gw'okuyingiza mu bujjuvu okuva mu bootstrap.scssfayiro yaffe ng'entandikwa yo.

Enkyukakyuka ezisookerwako

Buli nkyukakyuka ya Sass mu Bootstrap erimu !defaultbendera ekusobozesa okusazaamu omuwendo gw'enkyukakyuka ogusookerwako mu Sass yo nga tokyusizza nsibuko ya Bootstrap. Koppa era oteeke enkyukakyuka nga bwe kyetaagisa, kyusa emiwendo gyazo, era oggyewo !defaultbendera. Singa enkyukakyuka eba yaweebwa dda, olwo tejja kuddamu kuweebwa miwendo egy'enjawulo mu Bootstrap.

Ojja kusanga olukalala lw'enkyukakyuka za Bootstrap mu bujjuvu mu scss/_variables.scss. Enkyukakyuka ezimu ziteekebwa ku null, enkyukakyuka zino tezifulumya kintu okuggyako nga zisuuliddwa mu nsengeka yo.

Variable overrides zirina okujja oluvannyuma lw'emirimu gyaffe, variables, ne mixins okuyingizibwa, naye nga tebannaba kuyingiza bisigadde.

Wano waliwo ekyokulabirako ekikyusa background-colorne colorfor the <body>nga oyingiza n'okukung'aanya Bootstrap okuyita mu 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

Ddamu nga bwe kyetaagisa ku nkyukakyuka yonna mu Bootstrap, nga mw'otwalidde n'enkola z'ensi yonna wansi.

Tandika ne Bootstrap ng'oyita ku npm ne pulojekiti yaffe ey'okutandika! Yolekera twbs/bootstrap-npm-starter template repository olabe engeri y'okuzimba n'okulongoosa Bootstrap mu pulojekiti yo eya npm. Mulimu omukung'aanya wa Sass, Autoprefixer, Stylelint, PurgeCSS, ne Ebifaananyi bya Bootstrap.

Maapu ne loopu

Bootstrap 4 erimu maapu za Sass ntono, ebisumuluzo ebibiri ebiyamba okukola amaka ga CSS ekwatagana. Tukozesa maapu za Sass ku langi zaffe, ebifo ebikutukamu giridi, n’ebirala. Nga enkyukakyuka za Sass, maapu zonna eza Sass zirimu !defaultbendera era zisobola okukyusibwa n’okugaziwa.

Ezimu ku maapu zaffe eza Sass zigattibwa ne zifuuka empty by default. Kino kikolebwa okusobozesa okugaziya okwangu okwa maapu ya Sass eweereddwa, naye kijja ku muwendo gw’okufuula okuggya ebintu ku maapu okukaluba katono.

Okukyusa mu maapu

Okukyusa langi eriwo mu $theme-colorsmaapu yaffe, yongera bino wammanga ku fayiro yo eya Sass eya bulijjo:

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

Okwongera ku maapu

Okwongera langi empya ku $theme-colors, yongera ku kisumuluzo ekipya n'omuwendo:

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

Ggyawo ku maapu

Okuggya langi ku $theme-colors, oba ku maapu endala yonna, kozesa map-remove. Kimanye nti olina okugiyingiza wakati w'ebyetaago byaffe n'eby'okulonda:

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

Ebisumuluzo ebyetaagisa

Bootstrap etwala okubeerawo kw’ebisumuluzo ebimu ebitongole munda mu maapu za Sass nga bwe twakozesa era ne tugaziya bino ffekka. Nga bw’olongoosa maapu ezirimu, oyinza okusanga ensobi ekisumuluzo kya maapu ya Sass ekigere we kikozesebwa.

Okugeza, tukozesa primary, success, dangern’ebisumuluzo okuva $theme-colorsku ku biyungo, obutambi, n’embeera za ffoomu. Okukyusa emiwendo gy'ebisumuluzo bino tekirina kuleeta nsonga yonna, naye okubiggyawo kiyinza okuleeta ensonga z'okukung'aanya kwa Sass. Mu mbeera zino, ojja kwetaaga okukyusa mu koodi ya Sass ekozesa emiwendo egyo.

Emirimu

Bootstrap ekozesa emirimu gya Sass egiwerako, naye subset yokka ekola ku general theming. Tutaddemu emirimu esatu egy'okufuna emiwendo okuva mu maapu za langi:

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

Bino bikusobozesa okulonda langi emu okuva ku maapu ya Sass okufaananako nnyo engeri gy’oyinza okukozesaamu enkyukakyuka ya langi okuva mu v3.

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

Tulina n’omulimu omulala ogw’okufuna omutendera ogw’enjawulo ogwa langi okuva ku $theme-colorsmaapu. Emiwendo gy’emitendera egy’obubi gijja kutangaaza langi, ate emitendera egy’oku ntikko gijja kuzikiza.

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

Mu nkola, wandiyise omulimu n'oyisa mu parameters bbiri: erinnya lya langi okuva $theme-colors(okugeza, primary oba danger) n'omutendera gw'ennamba.

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

Emirimu emirala giyinza okugattibwako mu biseera eby’omu maaso oba Sass yo eya custom okukola emirimu egy’omutendera ku maapu za Sass ez’enjawulo, oba wadde eya generic singa oba oyagala okubeera verbose ennyo.

Okwawukana kwa langi

Omulimu ogw’enjawulo gwe tussa mu Bootstrap gwe mulimu gw’okulaga enjawulo mu langi, color-yiq. Ekozesa ekifo kya langi ya YIQ okuzzaawo mu ngeri ey’otoma langi ey’enjawulo eyaka ( #fff) oba enzirugavu ( #111) okusinziira ku langi y’omusingi eragiddwa. Omulimu guno gwa mugaso nnyo naddala ku mixins oba loops nga okola classes eziwera.

Okugeza, okukola ebifaananyi bya langi okuva ku $theme-colorsmaapu yaffe:

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

Era esobola okukozesebwa ku byetaago by’enjawulo eby’omulundi gumu:

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

Osobola n'okulaga langi ey'omusingi n'emirimu gyaffe egya maapu ya langi:

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

Okutoloka ku SVG

Tukozesa escape-svgomulimu okutoloka <, >n'ennukuta #z'ebifaananyi eby'emabega ebya SVG. Ennukuta zino zeetaaga okutoloka okusobola okulaga obulungi ebifaananyi eby’emabega mu IE. Nga okozesa escape-svgomulimu, data URIs zirina okujulizibwa.

Emirimu gy’okugatta n’okuggyako

Tukozesa emirimu gya addne subtractokuzinga omulimu gwa CSS calc. Ekigendererwa ekikulu eky’emirimu gino kwe kwewala ensobi ng’omuwendo “ogutaliiko yuniti” 0guyisibwa mu calckigambo. Ebigambo nga calc(10px - 0)bijja kuzzaayo ensobi mu bulawuzi zonna, wadde nga bituufu mu kubala.

Okugeza awali calc entuufu:

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

Okugeza nga calc si ntuufu:

$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 eby'okulondako

Customize Bootstrap 4 ne fayiro yaffe eya custom variables ezimbiddwamu era okyuse mu ngeri ennyangu CSS preferences z'ensi yonna $enable-*n'enkyukakyuka za Sass empya. Override a variable's value era oddemu okukuŋŋaanya ne npm run testnga bwe kyetaagisa.

Osobola okuzuula n'okulongoosa enkyukakyuka zino ku nkola enkulu ez'ensi yonna mu scss/_variables.scssfayiro ya Bootstrap.

Enkyukakyuka Empisa Okunnyonnyola
$spacer 1rem(ekisookerwako), oba omuwendo gwonna > 0 Elaga omuwendo gwa spacer ogusookerwako okukola mu pulogulaamu ebikozesebwa byaffe ebya spacer .
$enable-rounded true(ekisookerwako) obafalse Esobozesa border-radiusemisono egyategekebwa edda ku bitundu eby'enjawulo.
$enable-shadows trueoba false(ekisookerwako) . Esobozesa box-shadowemisono gy’okuyooyoota egyategekebwa edda ku bitundu eby’enjawulo. Tekosa box-shadows ezikozesebwa ku mbeera z’okussa essira.
$enable-gradients trueoba false(ekisookerwako) . Esobozesa gradients ezitegekeddwa nga ziyita mu background-imagesitayiro ku bitundu eby'enjawulo.
$enable-transitions true(ekisookerwako) obafalse Esobozesa transitions ezitegekeddwa edda ku bitundu eby’enjawulo.
$enable-prefers-reduced-motion-media-query true(ekisookerwako) obafalse Enables the prefers-reduced-motionmedia query , ekinyigiriza ebifaananyi ebimu ebirina obulamu/enkyukakyuka okusinziira ku bye baagala eby'abakozesa bbulawuzi/enkola y'emirimu.
$enable-hover-media-query trueoba false(ekisookerwako) . Efuuliddwa
$enable-grid-classes true(ekisookerwako) obafalse Esobozesa okukola ebika bya CSS eby'enkola ya grid (okugeza, .container, .row, .col-md-1, n'ebirala).
$enable-caret true(ekisookerwako) obafalse Esobozesa ekintu eky'obulimba caret ku .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(ekisookerwako) obafalse Okwongerako “omukono” cursor ku bintu bya button ebitali bilema.
$enable-print-styles true(ekisookerwako) obafalse Esobozesa emisono egy'okulongoosa okukuba ebitabo.
$enable-responsive-font-sizes trueoba false(ekisookerwako) . Esobozesa obunene bw'empandiika obuddamu .
$enable-validation-icons true(ekisookerwako) obafalse Esobozesa background-imageebifaananyi munda mu biyingizibwa mu biwandiiko ne foomu ezimu ez'ennono ez'embeera z'okukakasa.
$enable-deprecation-messages true(ekisookerwako) obafalse Teeka ku falseokukweka okulabula ng'okozesa yonna ku mixins ezitakozesebwa n'emirimu egitegekeddwa okuggyibwawo mu v5.

Langi

Ebitundu bingi ebya Bootstrap eby’enjawulo n’ebikozesebwa bizimbibwa okuyita mu langi eziddiriŋŋana ezitegeezeddwa mu maapu ya Sass. Maapu eno esobola okukolebwako loopu mu Sass okukola amangu omuddirirwa gw’amateeka.

Langi zonna

Langi zonna eziri mu Bootstrap 4, zisangibwa nga Sass variables ne Sass map mu scss/_variables.scssfile. Kino kijja kugaziwa mu bifulumizibwa ebitonotono ebiddako okwongerako ebisiikirize ebirala, okufaananako nnyo ne paleedi ya greyscale gye twassaamu edda.

$bbululu #007bff nga bwe kiri
$indigo nga bwe kiri #6610f2 nga bwe kiri
$ekika kya kakobe #6f42c1 nga bwe kiri
$pinki #e83e8c nga bwe kiri
$emmyufu #dc3545 nga bwe kiri
$emicungwa #fd7e14 nga bwe kiri
$kyenvu #ffc107 nga bwe kiri
$ekiddugavu #28a745 nga bwe kiri
$teal #20c997 nga bwe kiri
$cyan #17a2b8 nga bwe kiri

Laba engeri gy'oyinza okukozesaamu bino mu Sass yo:

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

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

Ebika by'okukozesa langi nabyo biriwo okuteekawo colorne background-color.

Mu biseera eby’omu maaso, tujja kugenderera okuwa Sass maps ne variables for shades za buli langi nga bwetukoze ne grayscale colors wansi.

Langi z’omulamwa

Tukozesa ekitundu ekitono ekya langi zonna okukola ekipande kya langi ekitono okukola ensengeka za langi, era nga kisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro ya Bootstrap.

$ekisookerwako #007bff nga bwe kiri
$ekyokubiri #6c757d nga bwe kiri
$obuwanguzi #28a745 nga bwe kiri
$akabi #dc3545 nga bwe kiri
$okulabula #ffc107 nga bwe kiri
$info #17a2b8 nga bwe kiri
$ekitangaala #f8f9fa nga bwe kiri
$ekizikiza #343a40 nga bwe kiri

Enzirugavu

Ekibinja ekigazi eky'enkyukakyuka enzirugavu ne maapu ya Sass mu scss/_variables.scssku bisiikirize ebikwatagana eby'enzirugavu okwetoloola pulojekiti yo. Weetegereze nti zino “nzirugavu ennyogovu”, ezitera okudda ku ddoboozi erya bbululu eritali lya bulijjo, okusinga enzirugavu ezitaliimu.

$enzirugavu-100 #f8f9fa nga bwe kiri
$enzirugavu-200 #e9ecef nga bwe kiri
$enzirugavu-300 #dee2e6
$enzirugavu-400 #ced4da nga bwe kiri
$enzirugavu-500 #adb5bd
$enzirugavu-600 #6c757d nga bwe kiri
$enzirugavu-700 #495057 nga bwe kiri
$enzirugavu-800 #343a40 nga bwe kiri
$enzirugavu-900 #212529 nga bwe kiri

Mu scss/_variables.scss, ojja kusangamu enkyukakyuka za langi za Bootstrap ne maapu ya Sass. Wano waliwo ekyokulabirako kya $colorsmaapu ya 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;

Okwongera, okuggyawo, oba kyusa emiwendo munda mu maapu okutereeza engeri gye gikozesebwamu mu bitundu ebirala bingi. Ebyembi mu kiseera kino, si buli kitundu nti ekozesa maapu eno eya Sass. Ebipya ebigenda okufulumizibwa mu biseera eby’omu maaso bijja kufuba okulongoosa ku kino. Okutuusa olwo, teekateeka okukozesa ${color}enkyukakyuka ne maapu eno eya Sass.

Ebitundu ebikola omubiri

Ebitundu bingi ebya Bootstrap n’ebikozesebwa bizimbibwa ne @eachloopu eziddiŋŋana ku maapu ya Sass. Kino kiyamba nnyo naddala mu kukola enjawulo z’ekitundu nga zaffe $theme-colorsn’okukola enjawulo eziddamu ku buli breakpoint. Nga bw’olongoosa maapu zino eza Sass n’okuddamu okukung’aanya, ojja kulaba enkyukakyuka zo nga zeeyolekera mu loopu zino.

Ebikyusakyusa

Ebitundu bya Bootstrap bingi bizimbibwa n’enkola ya base-modifier class. Kino kitegeeza nti ekitundu ekinene eky’okukola sitayiro kibeera mu kiraasi ey’omusingi (okugeza, .btn) ate enjawulo za sitayiro zikoma ku kiraasi z’abakyusa (okugeza, .btn-danger). Zino modifier classes zizimbibwa okuva ku $theme-colorsmaapu okukola customizing ennamba n'erinnya lya modifier classes zaffe.

Wano waliwo ebyokulabirako bibiri ku ngeri gye tukola loopu ku $theme-colorsmaapu okukola ebikyusakyusa ku .alertkitundu n’ebikozesebwa byaffe byonna .bg-*eby’emabega.

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

Okuddamu

Zino Sass loops tezikoma ku maapu za langi zokka, era. Osobola n’okukola enjawulo eziddamu ez’ebitundu byo oba ebikozesebwa. Twala okugeza ebikozesebwa byaffe eby’okulaganya ebiwandiiko ebiddamu mwe tutabula @eachloopu ya $grid-breakpointsmaapu ya Sass n’okubuuza kw’emikutu mulimu.

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

Singa weetaaga okukyusa $grid-breakpoints, enkyukakyuka zo zijja kukola ku loopu zonna eziddiŋŋana ku maapu eyo.

Enkyukakyuka za CSS

Bootstrap 4 erimu nga daziini bbiri eza CSS custom properties (variables) mu CSS yaayo ekung'aanyiziddwa. Bino biwa ekkubo eryangu eri emiwendo egyakozesebwa ennyo nga langi zaffe ez’omulamwa, ebifo eby’okumenyawo, n’ebisenge by’empandiika ebisookerwako ng’okola mu Inspector ya browser yo, sandbox ya koodi, oba prototyping eya bulijjo.

Enkyukakyuka eziriwo

Wano waliwo enkyukakyuka ze tussaamu (weetegereze nti the :rootyeetaagibwa). Zisangibwa mu _root.scssfayiro yaffe.

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

Eby’okulabirako

Enkyukakyuka za CSS ziwa enkyukakyuka ezifaanagana n'enkyukakyuka za Sass, naye nga tekyetaagisa kukungaanya nga tezinnaweebwa ku bulawuzi. Okugeza, wano tuddamu okuteekawo efonti y’olupapula lwaffe n’emisono gy’okuyunga n’enkyukakyuka za CSS.

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

Enkyukakyuka za Breakpoint

Wadde nga mu kusooka twassaamu breakpoints mu CSS variables zaffe (okugeza, --breakpoint-md), zino teziwagirwa mu media queries , naye zikyayinza okukozesebwa munda mu rulesets mu media queries. Enkyukakyuka zino ez’okumenya zisigala mu CSS ekung’aanyiziddwa okusobola okukwatagana okudda emabega okusinziira ku ngeri gye zisobola okukozesebwa JavaScript. Ebisingawo bisange mu spec .

Wano waliwo ekyokulabirako ky'ebitawagirwa:

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

Era wano waliwo ekyokulabirako ky'ebyo ebiwagirwa:

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