in English

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.

Šajā lapā

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

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. 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 // Optionalsadaļas, ja nepieciešams. Mēs iesakām bootstrap.scsskā sākumpunktu izmantot pilnu importēšanas steku no mūsu faila.

Mainīgie noklusējuma iestatījumi

Katrs Bootstrap Sass mainīgais ietver !defaultkarogu, 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 !defaultkarogu. 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-colorun colorfor <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";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.

Sāciet darbu ar Bootstrap, izmantojot mūsu sākuma projektu, izmantojot npm! Dodieties uz twbs/bootstrap-npm-starter veidņu repozitoriju, lai uzzinātu, kā izveidot un pielāgot Bootstrap savā npm projektā. Ietver Sass kompilatoru, Autoprefixer, Stylelint, PurgeCSS un Bootstrap ikonas.

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 !defaultkarogs, 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-colorskartē ir definēti kā atsevišķi mainīgie. Lai mainītu esošu krāsu mūsu $theme-colorskartē, pievienojiet savam pielāgotajam Sass failam:

$primary: #0074d9;
$danger: #ff4136;

Vēlāk šie mainīgie tiek iestatīti Bootstrap $theme-colorskartē:

$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-colorskarti 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-colorsvai 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";

$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";
// 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, successun . Š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 sRGBtelpā, 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-colorskartes:

@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-svgfunkciju, 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 addun subtractfunkcijas, lai aplauztu CSS calcfunkciju. Šo funkciju galvenais mērķis ir izvairīties no kļūdām, kad 0izteiksmē 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-schemeir pieejams ar atbalstu light, darkun 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
  }
}