Theming Bootstrap
Անհատականացրեք Bootstrap 4-ը մեր նոր ներկառուցված Sass փոփոխականներով՝ գլոբալ ոճի նախապատվությունների համար՝ հեշտ թեմաների և բաղադրիչների փոփոխությունների համար:
Ներածություն
Bootstrap 3-ում թեմատավորումը հիմնականում պայմանավորված էր LESS-ի փոփոխական վերափոխումներով, հատուկ CSS-ով և առանձին թեմայի ոճաթերթով, որը մենք ներառել ենք մեր dist
ֆայլերում: Որոշակի ջանքեր գործադրելով՝ կարելի էր ամբողջությամբ վերափոխել Bootstrap 3-ի տեսքը՝ առանց դիպչելու հիմնական ֆայլերին: Bootstrap 4-ն ապահովում է ծանոթ, բայց մի փոքր այլ մոտեցում:
Այժմ թեմատիկավորումն իրականացվում է Sass փոփոխականների, Sass քարտեզների և հատուկ CSS-ի միջոցով: Այլևս չկա հատուկ թեմայի ոճաթերթ; փոխարենը կարող եք միացնել ներկառուցված թեման՝ գրադիենտներ, ստվերներ և այլն ավելացնելու համար:
Սաս
Օգտագործեք մեր աղբյուր Sass ֆայլերը՝ ձեր սեփական ակտիվների խողովակաշարով Sass-ը կազմելիս օգտվելու փոփոխականներից, քարտեզներից, միքսիններից և ավելին :
Ֆայլի կառուցվածքը
Հնարավորության դեպքում խուսափեք Bootstrap-ի հիմնական ֆայլերը փոփոխելուց: Sass-ի համար դա նշանակում է ստեղծել ձեր սեփական ոճաթերթը, որը ներմուծում է Bootstrap, որպեսզի կարողանաք փոփոխել և երկարացնել այն: Ենթադրելով, որ դուք օգտագործում եք փաթեթի կառավարիչ, ինչպիսին է npm, դուք կունենաք ֆայլի կառուցվածք, որն ունի հետևյալ տեսքը.
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Եթե դուք ներբեռնել եք մեր սկզբնաղբյուր ֆայլերը և չեք օգտագործում փաթեթի կառավարիչ, ապա կցանկանաք ձեռքով կարգավորել այդ կառուցվածքի նման մի բան՝ Bootstrap-ի սկզբնաղբյուր ֆայլերը ձեր սեփականից առանձին պահելով:
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ներմուծում
Ձեր custom.scss
մեջ դուք կներմուծեք Bootstrap-ի աղբյուր Sass ֆայլերը: Դուք ունեք երկու տարբերակ՝ ներառեք ամբողջ Bootstrap-ը կամ ընտրեք ձեզ անհրաժեշտ մասերը: Մենք խրախուսում ենք վերջինս, թեև տեղյակ եղեք, որ մեր բաղադրիչներում կան որոշ պահանջներ և կախվածություններ: Դուք նաև պետք է ներառեք որոշ JavaScript մեր պլագինների համար:
// 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";
Այս կարգավորումից հետո դուք կարող եք սկսել փոփոխել ձեր Sass փոփոխականներից և քարտեզներից որևէ մեկը custom.scss
: // Optional
Անհրաժեշտության դեպքում կարող եք նաև սկսել Bootstrap-ի մասեր ավելացնել բաժնի տակ : Մենք առաջարկում ենք օգտագործել մեր ֆայլի ներմուծման ամբողջական փաթեթը՝ bootstrap.scss
որպես ելակետ:
Փոփոխական լռելյայն
Bootstrap-ի յուրաքանչյուր Sass փոփոխական ներառում է !default
դրոշակ, որը թույլ է տալիս փոխել փոփոխականի լռելյայն արժեքը ձեր սեփական Sass-ում՝ առանց Bootstrap-ի սկզբնական կոդը փոփոխելու: Անհրաժեշտության դեպքում պատճենեք և տեղադրեք փոփոխականները, փոփոխեք դրանց արժեքները և հեռացրեք !default
դրոշակը: Եթե փոփոխականն արդեն նշանակված է, ապա այն նորից չի վերագրվի Bootstrap-ի լռելյայն արժեքներով:
Դուք կգտնեք Bootstrap-ի փոփոխականների ամբողջական ցանկը scss/_variables.scss
: Որոշ փոփոխականներ դրված են null
, այս փոփոխականները չեն թողարկում հատկությունը, եթե դրանք չեղարկվեն ձեր կազմաձևում:
Փոփոխականների վերափոխումները պետք է գան մեր գործառույթների, փոփոխականների և միքսների ներմուծումից հետո, բայց մինչ մնացած ներմուծումները:
Ահա մի օրինակ, որը փոխում է background-color
և color
-ը <body>
npm-ի միջոցով Bootstrap-ը ներմուծելիս և կազմելիս.
@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
Անհրաժեշտության դեպքում կրկնեք Bootstrap-ի ցանկացած փոփոխականի համար, ներառյալ ստորև ներկայացված գլոբալ տարբերակները:
Քարտեզներ և օղակներ
Bootstrap 4-ը ներառում է մի քանի Sass քարտեզներ, առանցքային արժեքների զույգեր, որոնք հեշտացնում են հարակից CSS-ի ընտանիքների ստեղծումը: Մենք օգտագործում ենք Sass քարտեզները մեր գույների, ցանցի անջատման կետերի և այլնի համար: Ինչպես Sass փոփոխականները, բոլոր Sass քարտեզները ներառում են !default
դրոշը և կարող են անտեսվել և ընդլայնվել:
Մեր Sass քարտեզներից մի քանիսը լռելյայնորեն միավորված են դատարկ քարտեզների մեջ: Սա արվում է տվյալ Sass քարտեզի հեշտ ընդլայնումը թույլ տալու համար, սակայն դա արժեւորում է մի փոքր ավելի դժվարացնել տարրերը քարտեզից հեռացնելը :
Փոփոխել քարտեզը
Մեր $theme-colors
քարտեզում գոյություն ունեցող գույնը փոփոխելու համար ավելացրեք հետևյալը ձեր հատուկ Sass ֆայլում.
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Ավելացնել քարտեզի վրա
Նոր գույն $theme-colors
ավելացնելու համար ավելացրեք նոր բանալին և արժեքը.
$theme-colors: (
"custom-color": #900
);
Հեռացնել քարտեզից
$theme-colors
Գույները կամ որևէ այլ քարտեզից հեռացնելու համար օգտագործեք map-remove
: Իմացեք, որ այն պետք է տեղադրեք մեր պահանջների և տարբերակների միջև.
// 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";
...
Պահանջվող բանալիներ
Bootstrap-ը ենթադրում է որոշ հատուկ ստեղների առկայություն Sass քարտեզներում, քանի որ մենք ինքներս օգտագործել և ընդլայնել ենք դրանք: Ներառված քարտեզները հարմարեցնելիս կարող եք բախվել սխալների, երբ օգտագործվում է հատուկ Sass քարտեզի բանալին:
Օրինակ՝ հղումների, կոճակների և ձևերի վիճակների համար մենք օգտագործում ենք primary
, success
, և danger
ստեղները : $theme-colors
Այս բանալիների արժեքների փոխարինումը խնդիրներ չպետք է առաջացնի, սակայն դրանք հեռացնելը կարող է առաջացնել Sass-ի կազմման հետ կապված խնդիրներ: Այս դեպքերում դուք պետք է փոփոխեք Sass կոդը, որն օգտագործում է այդ արժեքները:
Գործառույթներ
Bootstrap-ն օգտագործում է Sass-ի մի քանի գործառույթ, սակայն ընդհանուր թեմաների համար կիրառելի են միայն ենթաբազմությունները: Գունավոր քարտեզներից արժեքներ ստանալու համար մենք ներառել ենք երեք գործառույթ.
@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);
}
Սրանք թույլ են տալիս Sass քարտեզից ընտրել մեկ գույն, ինչպես դուք կօգտագործեիք գունային փոփոխական v3-ից:
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Մենք ունենք նաև մեկ այլ գործառույթ՝ քարտեզից գույնի որոշակի մակարդակ ստանալու համար: $theme-colors
Բացասական մակարդակի արժեքները կթեթևացնեն գույնը, իսկ ավելի բարձր մակարդակները կմգանեն:
@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);
}
Գործնականում դուք պետք է կանչեք ֆունկցիան և փոխանցեք երկու պարամետր՝ գույնի անվանումը $theme-colors
(օրինակ՝ առաջնային կամ վտանգավոր) և թվային մակարդակ:
.custom-element {
color: theme-color-level(primary, -10);
}
Լրացուցիչ գործառույթներ կարող են ավելացվել ապագայում կամ ձեր սեփական Sass-ը, որպեսզի ստեղծեք մակարդակի գործառույթներ լրացուցիչ Sass քարտեզների համար, կամ նույնիսկ ընդհանուր, եթե ցանկանում եք ավելի մանրամասն լինել:
Գույնի հակադրություն
Լրացուցիչ գործառույթը, որը մենք ներառում ենք Bootstrap-ում, գույնի հակադրության գործառույթն է, color-yiq
. Այն օգտագործում է YIQ գունային տարածությունը ՝ ավտոմատ կերպով վերադարձնելու բաց ( #fff
) կամ մուգ ( #111
) հակադրություն գույնը՝ հիմնված նշված հիմնական գույնի վրա: Այս ֆունկցիան հատկապես օգտակար է միքսների կամ օղակների համար, որտեղ դուք ստեղծում եք մի քանի դասեր:
Օրինակ՝ մեր $theme-colors
քարտեզից գունավոր նմուշներ ստեղծելու համար.
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Այն կարող է օգտագործվել նաև միանվագ հակադրության կարիքների համար.
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Դուք կարող եք նաև նշել հիմնական գույնը մեր գունային քարտեզի գործառույթներով.
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Փախուստ SVG
Մենք օգտագործում ենք ֆունկցիան SVG ֆոնային պատկերների համար , և նիշերից escape-svg
խուսափելու համար: Այս նիշերը պետք է փախչել՝ IE-ում ֆոնային պատկերները պատշաճ կերպով ցուցադրելու համար: Ֆունկցիան օգտագործելիս տվյալների URI-ները պետք է մեջբերվեն:<
>
#
escape-svg
Ավելացնել և հանել ֆունկցիաներ
Մենք օգտագործում ենք add
և subtract
ֆունկցիաները CSS ֆունկցիան փաթաթելու համար calc
: Այս գործառույթների հիմնական նպատակն է խուսափել սխալներից, երբ «առանց միավորի» 0
արժեքը փոխանցվում է calc
արտահայտություն: Նման արտահայտությունները calc(10px - 0)
սխալ կվերադարձնեն բոլոր բրաուզերներում, չնայած մաթեմատիկորեն ճիշտ են:
Օրինակ, որտեղ հաշվարկը վավեր է.
$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);
}
Օրինակ, որտեղ հաշվարկը անվավեր է.
$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 տարբերակներ
Անհատականացրեք Bootstrap 4-ը մեր ներկառուցված փոփոխականների ֆայլով և հեշտությամբ փոխեք գլոբալ CSS-ի նախապատվությունները նոր $enable-*
Sass փոփոխականներով: Անտեսեք փոփոխականի արժեքը և npm run test
անհրաժեշտության դեպքում նորից կազմեք:
Դուք կարող եք գտնել և հարմարեցնել այս փոփոխականները Bootstrap-ի scss/_variables.scss
ֆայլի հիմնական գլոբալ տարբերակների համար:
Փոփոխական | Արժեքներ | Նկարագրություն |
---|---|---|
$spacer |
1rem (կանխադրված) կամ ցանկացած արժեք > 0 |
Հատկորոշում է լռելյայն spacer արժեքը մեր spacer-ի օգտակար ծառայությունները ծրագրավորելու համար : |
$enable-rounded |
true (կանխադրված) կամfalse |
Միացնում է նախապես սահմանված border-radius ոճերը տարբեր բաղադրիչների վրա: |
$enable-shadows |
true կամ false (կանխադրված) |
Միացնում է նախապես սահմանված դեկորատիվ box-shadow ոճերը տարբեր բաղադրիչների վրա: Չի ազդում box-shadow ֆոկուսային վիճակների համար օգտագործվող վրա: |
$enable-gradients |
true կամ false (կանխադրված) |
Միացնում է նախապես սահմանված գրադիենտները background-image տարբեր բաղադրիչների ոճերի միջոցով: |
$enable-transitions |
true (կանխադրված) կամfalse |
Միացնում է նախապես սահմանված transition s-երը տարբեր բաղադրիչների վրա: |
$enable-prefers-reduced-motion-media-query |
true (կանխադրված) կամfalse |
Միացնում է prefers-reduced-motion մեդիա հարցումը , որը ճնշում է որոշակի անիմացիաներ/անցումներ՝ հիմնվելով օգտատերերի բրաուզերի/օպերացիոն համակարգի նախասիրությունների վրա: |
$enable-hover-media-query |
true կամ false (կանխադրված) |
Հնացած |
$enable-grid-classes |
true (կանխադրված) կամfalse |
Թույլ է տալիս CSS դասերի ստեղծումը ցանցային համակարգի համար (օրինակ, .container , .row , .col-md-1 , և այլն): |
$enable-caret |
true (կանխադրված) կամfalse |
Միացնում է կեղծ տարրը միացված է .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (կանխադրված) կամfalse |
Ավելացրեք «ձեռքի» կուրսորը չանջատված կոճակի տարրերին: |
$enable-print-styles |
true (կանխադրված) կամfalse |
Միացնում է տպագրության օպտիմալացման ոճերը: |
$enable-responsive-font-sizes |
true կամ false (կանխադրված) |
Միացնում է արձագանքող տառատեսակների չափերը : |
$enable-validation-icons |
true (կանխադրված) կամfalse |
Միացնում background-image է պատկերակները տեքստային մուտքերում և որոշ հատուկ ձևաթղթեր վավերացման վիճակների համար: |
$enable-deprecation-messages |
true (կանխադրված) կամfalse |
Ընտրեք՝ false նախազգուշացումները թաքցնելու համար, երբ օգտագործում եք հնացած միքսներ և գործառույթներ, որոնք նախատեսվում է հեռացնել v5 : |
Գույն
Bootstrap-ի տարբեր բաղադրիչներից և կոմունալ ծառայություններից շատերը կառուցված են Sass քարտեզում սահմանված մի շարք գույների միջոցով: Այս քարտեզը կարող է պտտվել Sass-ում՝ մի շարք կանոնակարգեր արագ ստեղծելու համար:
Բոլոր գույները
Bootstrap 4-ում առկա բոլոր գույները հասանելի են որպես Sass փոփոխականներ և Sass քարտեզ scss/_variables.scss
ֆայլում: Սա կընդլայնվի հետագա աննշան թողարկումներում՝ լրացուցիչ երանգներ ավելացնելու համար, ինչպես մոխրագույն գույնի ներկապնակը , որը մենք արդեն ներառել ենք:
Ահա, թե ինչպես կարող եք դրանք օգտագործել ձեր Sass-ում.
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Գույնի օգտակար դասերը հասանելի են նաև կարգավորելու color
և background-color
.
Թեմայի գույները
Մենք օգտագործում ենք բոլոր գույների ենթաբազմությունը՝ գունային սխեմաներ ստեղծելու համար ավելի փոքր գունապնակ ստեղծելու համար, որը հասանելի է նաև որպես Sass փոփոխականներ և Sass քարտեզ Bootstrap-ի scss/_variables.scss
ֆայլում:
Մոխրագույններ
Մոխրագույն փոփոխականների ընդարձակ հավաքածու և Sass քարտեզ՝ scss/_variables.scss
ձեր նախագծում մոխրագույնի հետևողական երանգների համար: Նկատի ունեցեք, որ դրանք «սառը մոխրագույններ» են, որոնք հակված են դեպի նուրբ կապույտ երանգ, այլ ոչ թե չեզոք մոխրագույններ:
Շրջանակներում scss/_variables.scss
դուք կգտնեք Bootstrap-ի գունային փոփոխականները և Sass քարտեզը: Ահա $colors
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;
Ավելացնել, հեռացնել կամ փոփոխել արժեքները քարտեզի մեջ՝ թարմացնելու, թե ինչպես են դրանք օգտագործվում բազմաթիվ այլ բաղադրիչներում: Ցավոք, այս պահին ոչ բոլոր բաղադրիչներն են օգտագործում այս Sass քարտեզը: Հետագա թարմացումները կձգտեն բարելավել դա: Մինչ այդ, պլանավորեք օգտագործել ${color}
փոփոխականները և այս Sass քարտեզը:
Բաղադրիչներ
Bootstrap-ի շատ բաղադրիչներ և կոմունալ ծառայություններ կառուցված են @each
օղակներով, որոնք կրկնվում են Sass քարտեզի վրա: Սա հատկապես օգտակար է մեր կողմից բաղադրիչի $theme-colors
տարբերակներ ստեղծելու և յուրաքանչյուր ընդմիջման կետի համար պատասխանատու տարբերակներ ստեղծելու համար: Երբ դուք հարմարեցնում եք այս Sass քարտեզները և վերակոմպիլյացիա անում, դուք ավտոմատ կերպով կտեսնեք ձեր փոփոխություններն արտացոլված այս օղակներում:
Փոփոխիչներ
Bootstrap-ի շատ բաղադրիչներ կառուցված են բազային-մոդիֆիկատոր դասի մոտեցմամբ: Սա նշանակում է, որ ոճավորման հիմնական մասը պարունակվում է բազային դասում (օրինակ, .btn
), մինչդեռ ոճի տատանումները սահմանափակվում են փոփոխող դասերով (օրինակ, .btn-danger
): Այս մոդիֆիկատորների դասերը կառուցված են $theme-colors
քարտեզից՝ մեր մոդիֆիկատորների դասերի համարն ու անվանումը հարմարեցնելու համար:
Ահա երկու օրինակ, թե ինչպես ենք մենք շրջում քարտեզի վրա՝ բաղադրիչի և մեր բոլոր ֆոնային $theme-colors
ծրագրերի փոփոխիչներ ստեղծելու համար :.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);
}
Պատասխանատու
Այս Sass օղակները նույնպես չեն սահմանափակվում գունավոր քարտեզներով: Դուք կարող եք նաև առաջացնել ձեր բաղադրիչների կամ կոմունալ ծառայությունների պատասխանատու տատանումները: Վերցրեք, օրինակ, մեր արձագանքող տեքստի հավասարեցման կոմունալ ծառայությունները, որտեղ մենք խառնում ենք Sass քարտեզի @each
հանգույցը մեդիա հարցման հետ:$grid-breakpoints
@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; }
}
}
Եթե դուք պետք է փոփոխեք ձեր $grid-breakpoints
, ձեր փոփոխությունները կկիրառվեն այդ քարտեզի վրա կրկնվող բոլոր օղակների վրա:
CSS փոփոխականներ
Bootstrap 4-ը ներառում է շուրջ երկու տասնյակ CSS մաքսային հատկություններ (փոփոխականներ) իր կազմված CSS-ում: Դրանք ապահովում են հեշտ մուտք դեպի սովորաբար օգտագործվող արժեքներ, ինչպիսիք են մեր թեմայի գույները, ընդմիջման կետերը և հիմնական տառատեսակների կույտերը, երբ աշխատում եք ձեր զննարկչի Inspector-ում, կոդի ավազատուփում կամ ընդհանուր նախատիպերում:
Հասանելի փոփոխականներ
Ահա այն փոփոխականները, որոնք մենք ներառում ենք (նկատի ունեցեք, որ :root
դա պարտադիր է): Դրանք գտնվում են մեր _root.scss
ֆայլում:
: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;
}
Օրինակներ
CSS փոփոխականներն առաջարկում են նման ճկունություն Sass-ի փոփոխականների հետ, բայց առանց բրաուզերին մատուցվելուց առաջ կոմպիլյացիայի անհրաժեշտության: Օրինակ, այստեղ մենք վերակայում ենք մեր էջի տառատեսակը և կապի ոճերը CSS փոփոխականներով:
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Ընդմիջման կետի փոփոխականներ
Թեև մենք ի սկզբանե ներառել ենք ընդմիջման կետեր մեր CSS փոփոխականներում (օրինակ՝ --breakpoint-md
), դրանք չեն աջակցվում մեդիա հարցումներում , սակայն դրանք դեռ կարող են օգտագործվել մեդիա հարցումների կանոնակարգերում: Այս բեկման կետի փոփոխականները մնում են կազմված CSS-ում՝ հետադարձ համատեղելիության համար, հաշվի առնելով, որ դրանք կարող են օգտագործվել JavaScript-ի կողմից: Իմացեք ավելին սպեկտրում :
Ահա մի օրինակ, որը չի աջակցվում.
@media (min-width: var(--breakpoint-sm)) {
...
}
Եվ ահա մի օրինակ, թե ինչն է աջակցվում.
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}