Sass
Izmantojiet mūsu avota Sass failus, lai izmantotu mainīgos, kartes, mixins un funkcijas, lai palīdzētu jums ātrāk izveidot un pielāgot savu projektu.
Izmantojiet mūsu avota Sass failus, lai izmantotu mainīgos, kartes, mixins un daudz ko citu.
Failu struktūra
Kad vien iespējams, izvairieties no Bootstrap pamatfailu modificēšanas. Sass gadījumā tas nozīmē izveidot savu stila lapu, kas importē Bootstrap, lai jūs varētu to modificēt un paplašināt. Pieņemot, ka izmantojat pakotņu pārvaldnieku, piemēram, npm, faila struktūra izskatīsies šādi:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ja esat lejupielādējis mūsu avota failus un neizmantojat pakotņu pārvaldnieku, vēlēsities manuāli iestatīt kaut ko līdzīgu šai struktūrai, turot Bootstrap avota failus atsevišķi no saviem.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Notiek importēšana
Savā custom.scss
, jūs importēsit Bootstrap avota Sass failus. Jums ir divas iespējas: iekļaut visu Bootstrap vai izvēlēties vajadzīgās daļas. Mēs iesakām izmantot pēdējo, lai gan ņemiet vērā, ka mūsu komponentiem ir dažas prasības un atkarības. Jums būs jāiekļauj arī daži JavaScript spraudņi.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Kad šī iestatīšana ir ieviesta, varat sākt modificēt jebkuru no Sass mainīgajiem un kartēm savā custom.scss
. Varat arī sākt pievienot Bootstrap daļas zem // Optional
sadaļas, ja nepieciešams. Mēs iesakām bootstrap.scss
kā sākumpunktu izmantot pilnu importēšanas steku no mūsu faila.
Mainīgie noklusējuma iestatījumi
Katrs Bootstrap Sass mainīgais ietver !default
karogu, kas ļauj ignorēt mainīgā noklusējuma vērtību savā Sass, nemainot Bootstrap avota kodu. Ja nepieciešams, kopējiet un ielīmējiet mainīgos, mainiet to vērtības un noņemiet !default
karogu. Ja mainīgais jau ir piešķirts, tas netiks atkārtoti piešķirts pēc noklusējuma vērtībām programmā Bootstrap.
Pilnu Bootstrap mainīgo sarakstu atradīsit scss/_variables.scss
. Daži mainīgie ir iestatīti uz null
, šie mainīgie neizvada rekvizītu, ja vien tie nav ignorēti jūsu konfigurācijā.
Mainīgo ignorēšanai ir jānotiek pēc mūsu funkciju importēšanas, bet pirms pārējās importēšanas.
Šeit ir piemērs, kas maina background-color
un color
for <body>
, importējot un kompilējot Bootstrap, izmantojot npm:
// Required
@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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Atkārtojiet pēc vajadzības jebkuram Bootstrap mainīgajam, tostarp tālāk norādītajām globālajām opcijām.
Kartes un cilpas
Bootstrap ietver dažas Sass kartes, atslēgu vērtību pārus, kas atvieglo saistīto CSS saišu ģenerēšanu. Mēs izmantojam Sass kartes savām krāsām, režģa pārtraukuma punktiem un citiem. Tāpat kā Sass mainīgajos, visās Sass kartēs ir ietverts !default
karogs, un tās var ignorēt un paplašināt.
Dažas no mūsu Sass kartēm pēc noklusējuma ir sapludinātas tukšās. Tas tiek darīts, lai dotu Sass karti viegli izvērstu, taču par to vienumu noņemšana no kartes ir nedaudz grūtāka.
Mainīt karti
Visi mainīgie $theme-colors
kartē ir definēti kā atsevišķi mainīgie. Lai mainītu esošu krāsu mūsu $theme-colors
kartē, pievienojiet savam pielāgotajam Sass failam:
$primary: #0074d9;
$danger: #ff4136;
Vēlāk šie mainīgie tiek iestatīti Bootstrap $theme-colors
kartē:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Pievienot kartei
Pievienojiet jaunas krāsas $theme-colors
, vai jebkurai citai kartei, izveidojot jaunu Sass karti ar savām pielāgotajām vērtībām un sapludinot to ar sākotnējo karti. Šādā gadījumā mēs izveidosim jaunu $custom-colors
karti un sapludināsim to ar $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Noņemt no kartes
Lai noņemtu krāsas no $theme-colors
vai jebkuras citas kartes, izmantojiet map-remove
. Ņemiet vērā, ka tas ir jāievieto starp mūsu prasībām un opcijām:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Nepieciešamās atslēgas
Bootstrap pieņem noteiktu atslēgu klātbūtni Sass kartēs, kā mēs tās izmantojām un paplašinājām. Pielāgojot iekļautās kartes, var rasties kļūdas, ja tiek izmantota noteikta Sass kartes atslēga.
Piemēram, saitēm, pogām un veidlapu stāvokļiem mēs izmantojam taustiņus primary
, success
un . Šo atslēgu vērtību aizstāšana nedrīkst radīt problēmas, taču to noņemšana var izraisīt Sass kompilēšanas problēmas. Šādos gadījumos jums būs jāmaina Sass kods, kas izmanto šīs vērtības.danger
$theme-colors
Funkcijas
Krāsas
Blakus mūsu Sass kartēm motīvu krāsas var izmantot arī kā atsevišķus mainīgos, piemēram, $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Krāsas var padarīt gaišākas vai tumšākas, izmantojot Bootstrap tint-color()
un shade-color()
funkcijas. Šīs funkcijas sajauc krāsas ar melnu vai baltu, atšķirībā no Sass sākotnējās lighten()
un darken()
funkcijām, kas mainīs gaišumu par noteiktu daudzumu, kas bieži vien nerada vēlamo efektu.
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
Praksē jūs izsaucat funkciju un nododat krāsu un svara parametrus.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Krāsu kontrasts
Lai atbilstu WCAG 2.0 pieejamības standartiem attiecībā uz krāsu kontrastu , autoriem ir jānodrošina kontrasta attiecība vismaz 4,5:1 ar ļoti dažiem izņēmumiem.
Papildu funkcija, ko mēs iekļaujam Bootstrap, ir krāsu kontrasta funkcija, color-contrast
. Tas izmanto WCAG 2.0 algoritmu kontrasta sliekšņu aprēķināšanai, pamatojoties uz relatīvo spilgtumu krāsu sRGB
telpā, lai automātiski atgrieztu gaišu ( #fff
), tumšu ( #212529
) vai melnu ( #000
) kontrasta krāsu, pamatojoties uz norādīto pamatkrāsu. Šī funkcija ir īpaši noderīga miksīniem vai cilpām, kurās ģenerējat vairākas klases.
Piemēram, lai ģenerētu krāsu paraugus no mūsu $theme-colors
kartes:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
To var izmantot arī vienreizējām kontrasta vajadzībām:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Varat arī norādīt pamatkrāsu, izmantojot mūsu krāsu kartes funkcijas:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Aizbēgt no SVG
Mēs izmantojam escape-svg
funkciju, lai izvairītu no un <
rakstzīmēm SVG fona attēliem. Lietojot funkciju, datu URI ir jākotē.>
#
escape-svg
Pievienošanas un atņemšanas funkcijas
Mēs izmantojam add
un subtract
funkcijas, lai aplauztu CSS calc
funkciju. Šo funkciju galvenais mērķis ir izvairīties no kļūdām, kad 0
izteiksmē tiek nodota vērtība “bez vienības” calc
. Izteiksmes, piemēram calc(10px - 0)
, atgriezīs kļūdu visās pārlūkprogrammās, neskatoties uz to, ka tās ir matemātiski pareizas.
Piemērs, kur aprēķins ir derīgs:
$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);
}
Piemērs, kur aprēķins nav derīgs:
$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);
}
Maisījumi
Mūsu scss/mixins/
direktorijā ir daudz miksu, kas nodrošina Bootstrap daļu darbību, un tos var izmantot arī jūsu projektā.
Krāsu shēmas
Multivides vaicājuma saīsinājums prefers-color-scheme
ir pieejams ar atbalstu light
, dark
un pielāgotām krāsu shēmām.
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}