Pagtema nga Bootstrap
Ipasayaat ti Bootstrap 4 babaen dagiti baro a naibangon a Sass a variablemi para kadagiti sangalubongan a kaykayat ti estilo para kadagiti nalaka a panagtema ken panagbalbaliw ti paset.
Pauna
Iti Bootstrap 3, ti panagtema ket kaaduan a naiturong babaen dagiti variable a panagbaliw iti LESS, kostumbre a CSS, ken ti naisina nga estilo ti tema nga inramanmi kadagiti dist
papelesmi. Babaen ti sumagmamano a panagregget, mabalin a naan-anay a disenioen manen ti maysa ti langa ti Bootstrap 3 a dina sagiden dagiti kangrunaan a file. Mangipaay ti Bootstrap 4 iti pamiliar, ngem naiduma bassit a pamay-an.
Ita, ti panagtema ket maibanag babaen dagiti variable ti Sass, dagiti mapa ti Sass, ken dagiti kostumbre a CSS. Awanen ti naipamaysa a tema nga stylesheet; imbes ketdi, mabalinmo a pagbalinen ti naibangon a tema a mangnayon kadagiti gradient, anniniwan, ken dadduma pay.
Sass nga
Usaren dagiti taudan a Sass a papelesmi tapno magundawayan dagiti variable, mapa, mixin, ken dadduma pay no agtipon ti Sass babaen ti panagusar ti bukodmo a tubo ti sanikua.
Estruktura ti file
No mabalin, liklikan ti panangbalbaliw kadagiti kangrunaan a file ti Bootstrap. Para iti Sass, kayatna a sawen ti panagpartuat ti bukodmo nga stylesheet a mangi-import ti Bootstrap tapno mabalinmo a baliwan ken palawaen daytoy. No ipapanmo nga agus-usar ka ti manager ti pakete a kas ti npm, maaddaanka ti estruktura ti papeles a kastoy ti langana:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
No in-downloadmo dagiti taudan a filemi ken saanmo nga agus-usar iti manager ti pakete, kayatmo a manual nga i-setup ti maysa a banag a kapada dayta nga estruktura, a pagtalinaeden dagiti taudan a file ti Bootstrap a naisina manipud iti bukodmo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Panag-import
Iti custom.scss
, i-importmo dagiti taudan a Sass a file ti Bootstrap. Adda dua a pagpiliam: iraman amin ti Bootstrap, wenno piliem dagiti paset a kasapulam. Paregtaenmi ti naud-udi, nupay ammom nga adda sumagmamano a kasapulan ken panagpannuray iti ballasiw dagiti pasetmi. Masapul met nga iramanmo ti sumagmamano a JavaScript para kadagiti plugin-mi.
// 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";
Iti dayta a panagisaad iti lugar, mabalinmo a rugian a baliwan ti ania man kadagiti variable ken mapa ti Sass iti custom.scss
. Mabalinmo pay a rugian ti manginayon kadagiti paset ti Bootstrap iti baba ti // Optional
benneg no kasapulan. Isingasingmi ti panagusar ti naan-anay nga import stack manipud iti bootstrap.scss
filemi a kas ti pangrugian a puntom.
Dagiti variable a default
Tunggal Sass a variable iti Bootstrap ket mangiraman ti !default
bandera a mangipalubos kenka a mangbalbaliw ti default a pateg ti variable iti bukodmo a Sass a saan a mangbalbaliw ti taudan a kodigo ti Bootstrap. Kopiaen ken i-paste dagiti variable no kasapulan, baliwan dagiti pategda, ken ikkaten ti !default
bandera. No ti maysa a variable ket naitudingen, kalpasanna daytoy ket saan a maituding manen babaen dagiti kasisigud a pateg iti Bootstrap.
Masarakanmo ti kompleto a listaan dagiti variable ti Bootstrap iti scss/_variables.scss
. Sumagmamano a variable ket naikeddeng iti null
, dagitoy a variable ket dida iruar ti tagikua malaksid no dagitoy ket nabaliwan iti panagisaadmo.
Dagiti variable override ket masapul nga umay kalpasan ti pannakai-import dagiti function, variable, ken mixin tayo, ngem sakbay ti nabati nga import.
Adda ditoy ti pagarigan a mangbalbaliw ti background-color
ken color
para iti <body>
no ag-import ken ag-compile ti Bootstrap babaen ti 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
Uliten no kasapulan para iti ania man a variable iti Bootstrap, a mairaman dagiti sangalubongan a pagpilian iti baba.
Mapa ken loop
Ti Bootstrap 4 ket mangiraman ti sumagmamano a mapa ti Sass, dagiti tulbek a paris ti pateg a mangpalaka ti panagpataud kadagiti pamilia dagiti mainaig a CSS. Usarenmi dagiti mapa ti Sass para kadagiti kolormi, dagiti grid breakpoint, ken dadduma pay. Kas met laeng kadagiti variable ti Sass, amin a mapa ti Sass ket mangiraman ti !default
bandera ken mabalin a maibabawi ken mapalawa.
Dadduma kadagiti mapatayo ti Sass ket naikaykaysa kadagiti awan kargana babaen ti default. Daytoy ket naaramid tapno mangipalubos ti nalaka a panagpalawa ti naited a mapa ti Sass, ngem umay iti gastos ti panagaramid ti panangikkat kadagiti banag manipud iti mapa a narigrigat bassit.
Baliwan ti mapa
Tapno mabaliwan ti addan a kolor iti $theme-colors
mapami, inayon dagiti sumaganad iti kostumbre a Sass file-mo:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Inayon iti mapa
Tapno manginayon ti baro a kolor iti $theme-colors
, inayon ti baro a tulbek ken pateg:
$theme-colors: (
"custom-color": #900
);
Ikkaten iti mapa
Tapno maikkat dagiti kolor manipud iti $theme-colors
, wenno aniaman a sabali a mapa, usaren ti map-remove
. Ammuem a masapul nga ikabilmo dayta iti nagbaetan dagiti kasapulan ken pagpilianmi:
// 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";
...
Masapul dagiti tulbek
Ti Bootstrap ket mangipapan ti kaadda dagiti sumagmamano nga espesipiko a tulbek iti uneg dagiti mapa ti Sass bayat nga inus-usarmi ken palawaenmi dagitoy a mismo. Bayat nga ipasayaatmo dagiti nairaman a mapa, mabalin a makasabetka kadagiti biddut no sadino a maus-usar ti espesipiko a tulbek ti mapa ti Sass.
Kas pagarigan, usarenmi ti primary
, success
, ken dagiti danger
tulbek manipud $theme-colors
para kadagiti silpo, buton, ken estado ti porma. Ti panangsukat kadagiti pateg dagitoy a tulbek ket rumbeng a mangiparang kadagiti awan nga isyu, ngem ti panangikkat kadagitoy ket mabalin a mangpataud kadagiti isyu ti panagtipon ti Sass. Kadagitoy a pagarigan, kasapulam a baliwan ti kodigo ti Sass nga agus-usar kadagita a pateg.
Dagiti Aramid
Ti Bootstrap ket agus-usar kadagiti sumagmamano a panagandar ti Sass, ngem ti laeng subgrupo ti maipakat iti sapasap a panagtema. Inramanmi ti tallo a panagandar para iti panangala kadagiti pateg manipud kadagiti mapa ti kolor:
@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);
}
Dagitoy ket mangipalubos kenka a mangpili ti maysa a kolor manipud iti mapa ti Sass a kasla unay no kasano nga usarem ti maysa a variable ti kolor manipud iti v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Adda met sabali a functiontayo para iti pananggun-od iti partikular a lebel ti kolor manipud iti $theme-colors
mapa. Dagiti negatibo a pateg ti lebel ket mangpalag-an ti kolor, bayat a dagiti nangatngato a lebel ket agsipnget.
@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);
}
Iti praktis, awagam koma ti function ken ipasa ti dua a parametro: ti nagan ti kolor manipud iti $theme-colors
(kas pagarigan, kangrunaan wenno peggad) ken ti numeriko a lebel.
.custom-element {
color: theme-color-level(primary, -10);
}
Dagiti kanayonan a panagandar ket mabalin a mainayon iti masakbayan wenno ti bukodmo a kostumbre a Sass tapno mangpartuat kadagiti panagandar ti lebel para kadagiti kanayonan a mapa ti Sass, wenno urayno ti sapasap no kayatmo ti agbalin nga ad-adu a berboso.
Panagduma ti kolor
Ti kanayonan a function nga iramanmi iti Bootstrap ket ti color contrast function, color-yiq
. Daytoy ket agus-usar ti espasio ti kolor ti YIQ tapno automatiko nga agsubli ti nalawag ( #fff
) wenno nasipnget ( #111
) a panagdumaduma a kolor a naibatay iti naikeddeng a batayan a kolor. Daytoy a panagandar ket nangruna a makatulong para kadagiti mixin wenno dagiti loop a sadiay ket mangpatpataudka kadagiti adu a klase.
Kas pagarigan, tapno makapataud kadagiti swatch ti kolor manipud iti $theme-colors
mapatayo:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Mabalin pay nga usaren daytoy para kadagiti maminsan laeng a kasapulan ti panagdumaduma:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Mabalinmo pay nga ikeddeng ti batayan a kolor babaen dagiti panagandar ti mapa ti kolormi:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Liklikan ti SVG
Usarenmi ti escape-svg
function tapno makalisi ti <
, >
ken dagiti #
karakter para kadagiti ladawan ti likudan ti SVG. Dagitoy a karakter ket kasapulan a makalisi tapno umno a maiparang dagiti ladawan ti likudan iti IE. No agus-usar ti escape-svg
panagandar, dagiti URI ti datos ket masapul a maadaw.
Dagiti function ti Add ken Subtract
Usarenmi ti add
and subtract
functions tapno mabalkot ti CSS calc
function. Ti kangrunaan a panggep dagitoy a panagandar ket tapno maliklikan dagiti biddut no ti maysa nga “awan yunit” 0
a pateg ket maipasa iti maysa nga calc
ebkas. Dagiti ebkas a kas calc(10px - 0)
ket mangisubli ti biddut kadagiti amin a browser, iti laksid ti matematiko nga umiso.
Pagarigan no sadino a balido ti calc:
$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);
}
Pagarigan a sadiay ti calc ket saan nga umiso:
$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 dagiti pagpilian
Ipasayaat ti Bootstrap 4 babaen ti naibangon a kostumbre a variable a filemi ken nalaka a baliwan dagiti sangalubongan a kaykayat ti CSS babaen dagiti baro a $enable-*
Sass a variable. I-override ti pateg ti maysa a variable ken ikompile manen babaen npm run test
ti kasapulan.
Mabalinmo a sapulen ken ipasayaat dagitoy a variable para kadagiti kangrunaan a sangalubongan a pagpilian iti scss/_variables.scss
papeles ti Bootstrap.
Variable nga | Dagiti Pagalagadan | Panangiladawan |
---|---|---|
$spacer |
1rem (default), wenno ania man a pateg > 0 |
Ikeddeng ti kasisigud a pateg ti spacer tapno programatiko a mangpataud kadagiti utilidadtayo ti spacer . |
$enable-rounded |
true (default) wennofalse |
Pagbalinenna dagiti nasakbay a naikeddeng border-radius nga estilo kadagiti nadumaduma a paset. |
$enable-shadows |
true wenno false (default) . |
Pagbalinenna dagiti nasakbay a naikeddeng nga box-shadow estilo ti dekorasion kadagiti nadumaduma a paset. Saan nga apektaran box-shadow ti s a nausar para kadagiti estado ti pokus. |
$enable-gradients |
true wenno false (default) . |
Pagbalinenna dagiti nasakbay a naikeddeng a panagrang-ay babaen background-image dagiti estilo kadagiti nadumaduma a paset. |
$enable-transitions |
true (default) wennofalse |
Pagbalinenna dagiti nasakbay a naikeddeng transition nga s kadagiti nadumaduma a paset. |
$enable-prefers-reduced-motion-media-query |
true (default) wennofalse |
Pagbalinenna ti prefers-reduced-motion panagsaludsod ti media , a manglapped kadagiti sumagmamano nga animasion/panagbalbaliw a naibatay kadagiti kaykayat ti browser/sistema ti panagpataray dagiti agar-aramat. |
$enable-hover-media-query |
true wenno false (default) . |
Saanen a maus-usar |
$enable-grid-classes |
true (default) wennofalse |
Pagbalinenna ti pannakapataud dagiti klase ti CSS para iti sistema ti grid (kas pagarigan, .container , .row , .col-md-1 , kdpy.). |
$enable-caret |
true (default) wennofalse |
Pagbalinenna ti pseudo nga elemento a caret iti .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (default) wennofalse |
Inayon ti “ima” a kursor kadagiti saan a nabaldado nga elemento ti buton. |
$enable-print-styles |
true (default) wennofalse |
Pagbalinenna dagiti estilo para iti panangpasayaat iti panagimprenta. |
$enable-responsive-font-sizes |
true wenno false (default) . |
Pagbalinenna dagiti makasungbat a kadakkel ti letra . |
$enable-validation-icons |
true (default) wennofalse |
Pagbalinenna background-image dagiti ikono iti uneg dagiti tekstual nga input ken sumagmamano a kostumbre a porma para kadagiti estado ti panangipaneknek. |
$enable-deprecation-messages |
true (default) wennofalse |
Itakderan iti false tapno mailemmeng dagiti pakdaar no agus-usar ti ania man kadagiti saanen a maus-usar a mixin ken dagiti panagandar a naiplano a maikkat iti v5 . |
Maris
Adu kadagiti nadumaduma a paset ken utilidad ti Bootstrap ket naibangon babaen ti serye dagiti kolor a naikeddeng iti mapa ti Sass. Daytoy a mapa ket mabalin a mai-loop iti Sass tapno napardas a mangpataud ti serye dagiti ruleset.
Amin a kolor
Amin a kolor a magun-od iti Bootstrap 4, ket magun-od a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scss
file. Daytoy ket mapalawa kadagiti sumaganad a babassit a pannakairuar tapno manginayon kadagiti kanayonan a maris, a kas ti grayscale a paleta a dati nga iramanmi.
Kastoy no kasano nga usaren dagitoy iti Sass mo:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Dagiti klase ti utilidad ti kolor ket magun-od pay para iti panangisaad color
ken background-color
.
Dagiti kolor ti tema
Usarenmi ti subgrupo dagiti amin a kolor tapno mangpartuat ti basbassit a paleta ti kolor para iti panagpataud kadagiti eskema ti kolor, a magun-od pay a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scss
papeles ti Bootstrap.
Dagiti abuabu
Ti nalawa a grupo dagiti abuabuan a variable ken ti mapa ti Sass iti scss/_variables.scss
para kadagiti agtultuloy a maris ti abuabu iti ballasiw ti proyektom. Paliiwenyo a dagitoy ket “nalamiis nga abuabu”, nga aggargaraw nga agturong iti nasipnget nga asul a tono, imbes a neutral nga abuabu.
Iti uneg scss/_variables.scss
ti , makasarakka kadagiti variable ti kolor ti Bootstrap ken ti mapa ti Sass. Adda ditoy ti pagarigan ti $colors
mapa ti 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;
Inayon, ikkaten, wenno baliwan dagiti pateg iti uneg ti mapa tapno mapabaro no kasano a maus-usar dagitoy kadagiti adu a dadduma pay a paset. Ti makadakes iti daytoy a panawen, saan a tunggal maysa a paset ket agus-usar iti daytoy a mapa ti Sass. Ikagumaan dagiti masanguanan nga update a pasayaaten daytoy. Agingga iti dayta, agplano iti panangusar kadagiti ${color}
variable ken daytoy a mapa ti Sass.
Dagiti paset
Adu kadagiti paset ken utilidad ti Bootstrap ket naibangon nga addaan kadagiti @each
loop nga agsublisubli iti rabaw ti mapa ti Sass. Daytoy ket nangruna a makatulong para iti panagpataud kadagiti variante ti maysa a paset babaen ti mi $theme-colors
ken panagpartuat kadagiti makasungbat a variante para iti tunggal maysa a breakpoint. Bayat ti panangipasayaatmo kadagitoy a mapa ti Sass ken panagtipon manen, automatiko a makitam dagiti panagbalbaliwmo a maiparangarang kadagitoy a loop.
Dagiti Mangbalbaliw
Adu kadagiti paset ti Bootstrap ket naibangon babaen ti base-modifier class approach. Kayatna a sawen a ti kaaduan ti estilo ket naglaon iti maysa a batayan a klase (kas pagarigan, .btn
) bayat a dagiti panagduduma ti estilo ket naikeddeng kadagiti klase ti mangbalbaliw (kas pagarigan, .btn-danger
). Dagitoy a klase ti mangbalbaliw ket naibangon manipud iti $theme-colors
mapa tapno mangaramid ti panagpasayaat ti numero ken nagan dagiti klase ti mangbalbaliwtayo.
Adtoy ti dua a pagarigan no kasano ti panag-loop-tayo iti rabaw ti $theme-colors
mapa tapno mangpataud kadagiti mangbalbaliw iti .alert
paset ken amin a .bg-*
utilidadtayo iti likudan.
// 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);
}
Nasungbatan
Dagitoy a Sass loop ket saan a limitado kadagiti mapa ti kolor, met. Mabalinmo pay ti mangpataud kadagiti makasungbat a panagduduma dagiti paset wenno utilidadmo. Alaen a pagarigan dagiti responsive text alignment utilities mi a sadiay paglaokenmi ti maysa a @each
loop para iti $grid-breakpoints
mapa ti Sass nga addaan iti media query include.
@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; }
}
}
No kasapulam koma a baliwan ti $grid-breakpoints
, dagiti panagbalbaliwmo ket agaplikar kadagiti amin a loop nga agsublisubli iti rabaw dayta a mapa.
Dagiti variable ti CSS
Ti Bootstrap 4 ket mangiraman ti agarup a dua a dosena a kostumbre a tagikua ti CSS (dagiti variable) iti naurnong a CSS-na. Dagitoy ket mangipaayda ti nalaka a panagserrek kadagiti kadawyan a maus-usar a pateg a kas dagiti kolor ti temami, dagiti breakpoint, ken dagiti kangrunaan a stack ti letra no agtartrabaho iti Inspektor ti browsermo, maysa a sandbox ti kodigo, wenno sapasap a panagprototipo.
Dagiti magun-od a variable
Adda ditoy dagiti variable nga iramantayo (lalagipen a ti :root
ket kasapulan). Masarakan dagitoy iti _root.scss
file-mi.
: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;
}
Dagiti pagarigan
Dagiti variable ti CSS ket mangitukon ti kapada a fleksibilidad kadagiti variable ti Sass, ngem awan ti kasapulan ti panagtipon sakbay a maiserbi iti browser. Kas pagarigan, ditoy ket i-reset tayo ti font ken link styles ti panid tayo babaen kadagiti CSS variables.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Dagiti variable ti breakpoint
Bayat nga orihinal nga inramanmi dagiti breakpoint kadagiti CSS a variablemi (kas pagarigan, --breakpoint-md
), dagitoy ket saan a nasuportaran kadagiti panagsaludsod ti media , ngem mabalin pay laeng nga usaren dagitoy iti uneg dagiti ruleset kadagiti panagsaludsod ti media. Dagitoy a breakpoint a variable ket agtalinaed iti naurnong a CSS para iti agpalikud a panagtunos gapu ta dagitoy ket mabalin nga usaren babaen ti JavaScript. Ammuen ti ad-adu pay iti spec .
Adtoy ti pagarigan no ania ti saan a nasuportaran:
@media (min-width: var(--breakpoint-sm)) {
...
}
Ket ditoy ti pagarigan no ania ti nasuportaran:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}