Asɛmti a Wɔde Di Dwuma Bootstrap
Fa yɛn Sass nsakrae foforo a wɔasisi mu no yɛ Bootstrap 4 no sɛnea wopɛ ma wiase nyinaa su a wopɛ ma asɛmti ne afã nsakrae a ɛnyɛ den.
Nnianimu
Wɔ Bootstrap 3 mu no, na theming no titiriw ne variable overrides wɔ LESS, custom CSS, ne theme stylesheet soronko a yɛde kaa yɛn dist
fael ahorow no ho. Sɛ obi bɔ mmɔden kakra a, obetumi asan ayɛ Bootstrap 3 no ho nhyehyɛe foforo koraa a ɔrenka fael atitiriw no. Bootstrap 4 de ɔkwan a wonim no yiye, nanso ɛyɛ soronko kakra ma.
Afei, wɔde Sass variables, Sass maps, ne custom CSS na ɛyɛ theming. Asɛmti stylesheet a wɔatu wɔn ho ama bio nni hɔ; mmom no, wubetumi ama asɛmti a wɔasisi no ayɛ adwuma de gradients, shadows, ne nea ɛkeka ho aka ho.
Sass
Fa yɛn source Sass fael ahorow no di dwuma fa nya mfaso fi variables, maps, mixins, ne nea ɛkeka ho bere a woreboaboa Sass ano denam w’ankasa agyapade pipeline so.
Fael nhyehyɛe
Bere biara a ɛbɛyɛ yiye no, kwati sɛ wobɛsesa Bootstrap no fael atitiriw no. Sass deɛ, ɛno kyerɛ sɛ wobɛbɔ w’ankasa stylesheet a ɛde Bootstrap ba sɛdeɛ ɛbɛyɛ a wobɛtumi asesa na woatrɛw mu. Sɛ yɛfa no sɛ wode package manager te sɛ npm redi dwuma a, wobɛnya fael nhyehyɛɛ a ɛte sɛ yei:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Sɛ woatwe yɛn fibea fael ahorow no na woamfa package manager nni dwuma a, wobɛpɛ sɛ wode nsa hyehyɛ biribi a ɛte sɛ saa nhyehyɛe no, na ama Bootstrap fibea fael ahorow no ayɛ soronko wɔ wo de ho.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Nneɛma a wɔde ba amannɔne
Wɔ wo custom.scss
, wobɛfa Bootstrap no source Sass fael ahorow no aba. Wowɔ akwan abien a wobɛfa so: fa Bootstrap no nyinaa ka ho, anaa paw afã horow a wuhia. Yɛhyɛ nea etwa to no nkuran, ɛwom sɛ hu sɛ ahwehwɛde ne nneɛma bi a egyina so wɔ yɛn afã horow no nyinaa mu de. Ɛho behia nso sɛ wode JavaScript bi ka ho ma yɛn plugins no.
// 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";
Sɛ saa nhyehyɛe no wɔ hɔ a, wubetumi afi ase asesa Sass nsakrae ne asase mfonini ahorow a ɛwɔ wo custom.scss
. Wubetumi nso afi ase de Bootstrap no afã horow aka // Optional
ɔfã no ase sɛnea ɛho hia. Yɛhyɛ nyansa sɛ fa import stack a edi mũ no fi yɛn bootstrap.scss
fael no mu di dwuma sɛ wo mfiase.
Nneɛma a ɛsakra no defaults
Sass variable biara a ɛwɔ Bootstrap mu no de !default
frankaa no ka ho a ɛma wo kwan ma wotumi bu variable no default value no so wɔ w’ankasa Sass mu a wonsesa Bootstrap no source code no. Copy na fa variables no hyɛ mu sɛnea ɛho hia, sesa wɔn values, na yi !default
frankaa no fi hɔ. Sɛ wɔde variable bi ahyɛ mu dedaw a, ɛnde wɔrensan mfa default values a ɛwɔ Bootstrap mu no mma.
Wobɛhunu Bootstrap no nsakraeɛ no nyinaa wɔ scss/_variables.scss
. Wɔde nsakraeɛ binom ahyɛ null
, saa nsakraeɛ yi nnyi agyapadeɛ no adi gye sɛ wɔabɔ so wɔ wo nhyehyeɛ no mu.
Ɛsɛ sɛ variable overrides ba bere a yɛde yɛn functions, variables, ne mixins no aba akyi, nanso ansa na wɔde import nkae no aba.
Nhwɛsoɔ bi a ɛsesa background-color
ne color
ma no nie <body>
bere a wode Bootstrap reba na woreboaboa ano via 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
Tia mu sɛnea ɛho hia ma nsakrae biara wɔ Bootstrap mu, a wiase nyinaa nhyehyɛe ahorow a ɛwɔ ase ha no ka ho.
Asase mfonini ne loop ahorow
Bootstrap 4 no ka Sass maps nsa kakraa bi, key value pairs a ɛma ɛyɛ mmerɛw sɛ wobɛhyehyɛ mmusua a ɛfa CSS ho. Yɛde Sass maps di dwuma ma yɛn kɔla ahorow, grid breakpoints, ne nea ɛkeka ho. Te sɛ Sass variables no, Sass maps nyinaa de !default
frankaa no ka ho na wobetumi abɔ so na wɔatrɛw mu.
Yɛn Sass map ahorow no bi yɛ nea wɔaka abom ayɛ no nea hwee nni mu default so. Wɔyɛ eyi sɛnea ɛbɛyɛ a wobetumi atrɛw Sass asase mfonini bi a wɔde ama no mu mmerɛw, nanso ɛba wɔ ɛka a ɛbɛma nneɛma a wobeyi afi asase mfonini so no ayɛ den kakra no ho.
Sesa asase mfonini
Sɛ wopɛ sɛ wosakra kɔla bi a ɛwɔ hɔ dedaw wɔ yɛn $theme-colors
map no mu a, fa nea edidi so yi ka wo Sass fael a woahyɛ da ayɛ no ho:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Fa ka asase mfonini ho
Sɛ wode kɔla foforo bɛka ho a $theme-colors
, fa safoa foforo ne bo a ɛsom no ka ho:
$theme-colors: (
"custom-color": #900
);
Yi fi asase mfonini so
Sɛ wopɛ sɛ wuyi kɔla ahorow fi $theme-colors
, anaa asase mfonini foforo biara mu a, fa map-remove
. Hu sɛ ɛsɛ sɛ wode hyɛ yɛn ahwehwɛde ne nea yebetumi apaw ntam:
// 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";
...
Nsafe a wɔhwehwɛ
Bootstrap fa no sɛ nsafe pɔtee bi wɔ hɔ wɔ Sass map ahorow mu sɛnea yɛde dii dwuma na yɛn ankasa yɛtrɛw eyinom mu. Bere a woreyɛ asase mfonini ahorow a ɛka ho no ho nhyehyɛe no, wubetumi ahyia mfomso ahorow wɔ baabi a wɔde Sass asase mfonini pɔtee bi safe redi dwuma no.
Sɛ nhwɛso no, yɛde primary
, success
, ne danger
nsafe a efi mu no di dwuma $theme-colors
ma link ahorow, bɔtn ahorow, ne fom tebea horow. Ɛnsɛ sɛ saa nsafe yi botae ahorow a wobɛsesa no de nsɛm biara ba, nanso sɛ woyi fi hɔ a, ebetumi de Sass nhyiam ho nsɛm aba. Wɔ saa nsɛm yi mu no, ɛho behia sɛ wosakra Sass koodu a ɛde saa gyinapɛn ahorow no di dwuma no.
Dwumadi ahorow
Bootstrap de Sass dwumadie ahodoɔ bi di dwuma, nanso subset nko ara na ɛfa general theming ho. Yɛde dwumadie mmiɛnsa a ɛbɛma woanya botaeɛ afiri kɔla map ahodoɔ no mu aka ho:
@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);
}
Eyinom ma wo kwan ma wopaw kɔla biako fi Sass map mu te sɛ sɛnea wode kɔla nsakrae bedi dwuma afi v3 mu no ara pɛ.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Yɛwɔ adwuma foforo nso a yɛde nya kɔla pɔtee bi fi asase $theme-colors
mfonini no so. Negative level values bɛma kɔla no ayɛ hann, bere a level a ɛkorɔn no bɛma ayɛ sum.
@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);
}
Wɔ adeyɛ mu no, wobɛfrɛ dwumadie no na woatwam wɔ parameters mmienu mu: kɔla no din a ɛfiri $theme-colors
(sɛ nhwɛsoɔ no, mfitiaseɛ anaa asiane) ne akontabuo level.
.custom-element {
color: theme-color-level(primary, -10);
}
Wobetumi de dwumadie foforɔ aka ho daakye anaa w’ankasa Sass a woahyɛ da ayɛ de ayɛ level dwumadie ama Sass map foforɔ, anaa mpo generic deɛ sɛ wopɛ sɛ woyɛ verbose kɛseɛ a.
Kɔla ahorow a ɛne ne ho bɔ abira
Dwumadi foforo a yɛde ka Bootstrap ho ne kɔla a ɛne ne ho bɔ abira adwuma, color-yiq
. Ɛde YIQ kɔla ahunmu no di dwuma de san kɔla a ɛne ne ho bɔ abira a ɛyɛ hann ( #fff
) anaa esum ( #111
) a egyina nnyinaso kɔla a wɔakyerɛ no so no ba ne ho. Saa dwumadie yi ho wɔ mfasoɔ titire ma mixins anaa loops a woreyɛ class ahodoɔ pii.
Sɛ nhwɛso no, sɛ wopɛ sɛ woyɛ kɔla nhwɛsode ahorow fi yɛn $theme-colors
asase mfonini no so a:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Wobetumi nso de adi dwuma ama ahiade ahorow a ɛfa nsonsonoe a ɛba pɛnkoro ho:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Wubetumi nso de yɛn kɔla map dwumadi ahorow no akyerɛ kɔla a wɔde gyina so:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Gwane SVG
Yɛde escape-svg
dwumadie no guan <
, >
ne #
nkyerɛwdeɛ ma SVG akyi mfonini. Ɛsɛ sɛ woguan saa nkyerɛwde yi na ama wɔatumi akyerɛ akyi mfonini ahorow no yiye wɔ IE mu. Sɛ wode escape-svg
dwumadie no redi dwuma a, ɛsɛ sɛ wofa data URI ahodoɔ no ka.
Dwumadi ahorow a wɔde ka ho ne nea wɔtwe fi mu
Yɛde add
ne subtract
dwumadie no di dwuma de kyekyere CSS calc
dwumadie no. Dwumadi ahorow yi atirimpɔw titiriw ne sɛ ɛbɛkwati mfomso bere a wɔde 0
botae bi a “ɛnyɛ biako” rekɔ calc
asɛmfua bi mu no. Nsɛmfua te sɛ calc(10px - 0)
bɛsan de mfomso aba wɔ browser ahorow nyinaa mu, ɛmfa ho sɛ ɛyɛ akontaabu a ɛteɛ.
Nhwɛsoɔ a ɛwɔ baabi a calc no yɛ adwuma:
$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);
}
Nhwɛsoɔ a ɛwɔ baabi a calc no nyɛ adwuma:
$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 a wobetumi apaw
Fa yɛn custom variables fael a wɔahyɛ mu no yɛ Bootstrap 4 no na ɛnyɛ den sɛ wode $enable-*
Sass variables foforo bɛdan wiase nyinaa CSS apɛde. Override a variable's value na san boaboa ano npm run test
sɛnea ɛho hia.
Wubetumi ahu na woayɛ saa nsakrae ahorow yi ama wiase nyinaa nhyehyɛe atitiriw wɔ Bootstrap scss/_variables.scss
fael no mu.
Nneɛma a ɛsakra | Nneɛma a Ɛsom Bo | Nkyerɛmu |
---|---|---|
$spacer |
1rem (default), anaasɛ botae biara > 0 |
Kyerɛ default spacer botae a ɛbɛma programmatically ayɛ yɛn spacer utilities . |
$enable-rounded |
true (default) anaasɛfalse |
Ɛma border-radius style ahorow a wɔadi kan akyerɛkyerɛ mu wɔ nneɛma ahorow so no tumi yɛ adwuma. |
$enable-shadows |
true anaa false (default) . |
Ɛma wotumi yɛ nneɛma a wɔde siesie fie a wɔadi kan akyerɛkyerɛ box-shadow mu wɔ nneɛma ahorow so. Ɛnka box-shadow s a wɔde di dwuma ma focus states. |
$enable-gradients |
true anaa false (default) . |
Ɛma gradients a wɔadi kan akyerɛkyerɛ mu no yɛ adwuma via background-image styles wɔ components ahorow so. |
$enable-transitions |
true (default) anaasɛfalse |
Ɛma transition s a wɔadi kan akyerɛkyerɛ mu wɔ nneɛma ahorow so no tumi yɛ adwuma. |
$enable-prefers-reduced-motion-media-query |
true (default) anaasɛfalse |
Enables the prefers-reduced-motion media query , a esiw animations/nsakrae ahorow bi a egyina wɔn a wɔde di dwuma no browser/operating system apɛde so no ano. |
$enable-hover-media-query |
true anaa false (default) . |
Wɔagyae |
$enable-grid-classes |
true (default) anaasɛfalse |
Ɛma CSS adesua ahorow awo ntoatoaso no tumi yɛ ma grid nhyehyɛe no (sɛ nhwɛso no, .container , .row , .col-md-1 , ne nea ɛkeka ho). |
$enable-caret |
true (default) anaasɛfalse |
Ɛma pseudo element caret tumi yɛ adwuma wɔ .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (default) anaasɛfalse |
Fa “nsa” cursor ka button elements a ɛnyɛ adwuma no ho. |
$enable-print-styles |
true (default) anaasɛfalse |
Ɛma akwan horow a wɔfa so tintim nhoma no yɛ adwuma yiye no tumi yɛ adwuma. |
$enable-responsive-font-sizes |
true anaa false (default) . |
Ɛma font akɛse a ɛyɛ adwuma no tumi yɛ adwuma . |
$enable-validation-icons |
true (default) anaasɛfalse |
Ɛma background-image ahyɛnsodeɛ a ɛwɔ nkyerɛwee mu nsɛm a wɔde ahyɛ mu ne nsɛm a wɔahyɛ da ayɛ no bi yɛ adwuma ma validation states. |
$enable-deprecation-messages |
true (default) anaasɛfalse |
Set to false sɛ wode kɔkɔbɔ besie bere a wode mixins a wɔagyae ne dwumadi ahorow a wɔayɛ ho nhyehyɛe sɛ wobeyi afi hɔ wɔ v5 . |
Ahosuo
Bootstrap no mu nneɛma ahorow ne nneɛma a wɔde di dwuma no pii nam kɔla ahorow a wɔakyerɛkyerɛ mu wɔ Sass asase mfonini mu so na ɛkyekye. Wobetumi de saa asase mfonini yi ayɛ loop wɔ Sass mu de ayɛ mmara ahorow a ɛtoatoa so ntɛmntɛm.
Kɔla ahorow nyinaa
Kɔla a ɛwɔ Bootstrap 4 mu nyinaa, ɛwɔ hɔ sɛ Sass variables ne Sass map wɔ scss/_variables.scss
fael mu. Wɔbɛtrɛw eyi mu wɔ nneɛma nketenkete a wɔayi no adi a edi hɔ no mu de nsunsuanso afoforo aka ho, te sɛ grayscale palette a yɛde ka ho dedaw no ara pɛ.
Sɛnea wubetumi de eyinom adi dwuma wɔ wo Sass mu ni:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Kɔla mfaso adesua ahorow nso wɔ hɔ ma nhyehyɛe color
ne background-color
.
Asɛmti kɔla ahorow
Yɛde kɔla nyinaa subset di dwuma de yɛ kɔla palette ketewa bi a yɛde yɛ kɔla nhyehyɛe, a ɛsan nso wɔ hɔ sɛ Sass variables ne Sass map wɔ Bootstrap scss/_variables.scss
fael no mu.
Grays a ɛyɛ fɛ
Gray variables a ɛtrɛw ne Sass map wɔ mu scss/_variables.scss
ma gray shades a ɛkɔ so daa wɔ wo project no nyinaa mu. Hyɛ no nsow sɛ eyinom yɛ “cool grays”, a ɛtaa kɔ ɛnne bruu a ɛyɛ anifere so, sen sɛ ɛbɛyɛ fitaa a ɛnyɛ afã biara.
Wɔ scss/_variables.scss
, mu no, wubehu Bootstrap no kɔla nsakrae ne Sass map. $colors
Sass asase mfonini no ho nhwɛso ni:
$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;
Fa gyinapɛn ahorow ka ho, yi, anaa sesa wɔ map no mu na ama woatumi ayɛ sɛnea wɔde di dwuma wɔ nneɛma afoforo pii mu no foforo. Awerɛhosɛm ne sɛ saa bere yi, ɛnyɛ component biara na ɛde Sass map yi di dwuma. Daakye nsɛm foforo bɛbɔ mmɔden sɛ ɛbɛma eyi atu mpɔn. Enkosi saa bere no, yɛ nhyehyɛe sɛ wode ${color}
nsakrae ahorow no ne Sass asase mfonini yi bedi dwuma.
Nneɛma a ɛwom
Bootstrap no afã horow ne utilities no pii yɛ nea wɔde @each
loops a ɛsan yɛ bio wɔ Sass map so na ɛkyekye. Eyi boa titiriw ma generating variants of a component by yɛn $theme-colors
na yɛbɔ mmuae variants ma breakpoint biara. Bere a woreyɛ Sass maps yi ho nhyehyɛe na woasan aboaboa ano no, wubehu wo nsakrae no a ɛda adi wɔ saa loop ahorow yi mu no ara kwa.
Nneɛma a Wɔsesa
Bootstrap no afã horow no pii yɛ nea wɔde base-modifier class kwan na ɛkyekye. Wei kyerɛ sɛ styling no fã kɛse no ara wɔ base class (sɛ nhwɛso no, .btn
) bere a style nsakrae ahorow no wɔ modifier classes (sɛ nhwɛso no, .btn-danger
) nkutoo mu. Saa modifier classes yi wɔasi firi $theme-colors
map no so de yɛ customizing nɔma ne din a yɛn modifier classes no.
Nhwɛsoɔ mmienu a ɛkyerɛ sɛdeɛ yɛ loop wɔ $theme-colors
map no so de yɛ modifiers ma .alert
component no ne yɛn .bg-*
background utilities nyinaa nie.
// 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);
}
Mmuae a wɔde ma
Saa Sass loops yi nyɛ kɔla maps nko ara, nso. Wubetumi nso ayɛ wo components anaa utilities no mu nsakrae a ɛyɛ mmuae. Fa nhwɛsoɔ yɛn responsive text alignment utilities a yɛde @each
loop bi frafra $grid-breakpoints
Sass map no ne media query bi ka ho.
@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; }
}
}
Sɛ ɛsɛ sɛ wosakra wo $grid-breakpoints
, wo nsakrae no bɛfa loop ahorow a ɛresan ayɛ wɔ saa asase mfonini no so no nyinaa ho.
CSS nsakrae ahorow
Bootstrap 4 no de bɛyɛ CSS amanne agyapade (variables) bɛyɛ dumien abien ka ne CSS a wɔaboaboa ano no ho. Eyinom ma ɛyɛ mmerɛw sɛ wubenya gyinapɛn ahorow a wɔtaa de di dwuma te sɛ yɛn asɛmti kɔla ahorow, breakpoints, ne font stacks titiriw bere a woreyɛ adwuma wɔ wo browser no Inspector, code sandbox, anaa general prototyping mu no.
Nneɛma a ɛsakra a ɛwɔ hɔ
Nsakraeɛ a yɛde ka ho no ni (hyɛ no nsow sɛ the :root
is required). Wɔwɔ yɛn _root.scss
fael no mu.
: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;
}
Nhwɛso ahorow
CSS nsakraeɛ no ma nsakraeɛ a ɛte sɛ Sass nsakraeɛ no, nanso ɛho nhia sɛ wɔboaboa ano ansa na wɔde akɔma browser no. Sɛ nhwɛso no, ha na yɛresan asiesie yɛn krataafa no font ne link styles no denam CSS variables so.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Breakpoint nsakrae ahorow
Bere a mfiase no yɛde breakpoints kaa yɛn CSS variables ho (sɛ nhwɛso no, --breakpoint-md
), eyinom ntumi mmoa wɔ media abisade mu , nanso wɔda so ara betumi de adi dwuma wɔ rulesets mu wɔ media abisade mu. Saa breakpoint variables yi da so ara wɔ CSS a wɔaboaboa ano no mu ma akyi nhyiam a wɔde ama sɛ wobetumi de adi dwuma denam JavaScript so. Sua pii wɔ spec no mu .
Nea wɔmfa mmoa mma ho nhwɛso ni:
@media (min-width: var(--breakpoint-sm)) {
...
}
Na nea wɔfoa so ho nhwɛso ni:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}