Sass nga bwe kiri

Kozesa fayiro zaffe eza Sass ez’ensibuko okweyambisa enkyukakyuka, maapu, mixins, n’emirimu okukuyamba okuzimba amangu n’okulongoosa pulojekiti yo.

Ku muko guno

Kozesa fayiro zaffe eza Sass ez'ensibuko okweyambisa enkyukakyuka, maapu, mixins, n'ebirala.

Ensengeka ya fayiro

Buli lwe kiba kisoboka, weewale okukyusa fayiro za Bootstrap enkulu. Ku Sass, ekyo kitegeeza okukola stylesheet yo eyingiza Bootstrap osobole okugikyusa n’okugigaziya. Nga tufudde nti okozesa package manager nga npm, ojja kuba n'ensengeka ya fayiro eringa eno:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Bw’oba owanula fayiro zaffe ez’ensibuko era nga tokozesa muddukanya package, ojja kwagala okukola mu ngalo ekintu ekifaananako n’ensengeka eyo, okukuuma fayiro z’ensibuko za Bootstrap nga zaawukana ku zo.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Okuyingiza ebintu mu ggwanga

Mu custom.scss, ojja kuyingiza fayiro za Bootstrap ez'ensibuko Sass. Olina engeri bbiri: ssaamu byonna ebya Bootstrap, oba londa ebitundu by’olina. Tukubiriza eky’oluvannyuma, wadde nga kimanye nti waliwo ebyetaago ebimu n’okwesigamira mu bitundu byaffe byonna. Era ojja kwetaaga okussaamu JavaScript ezimu ku plugins zaffe.

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

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Nga ensengeka eyo eri mu kifo, osobola okutandika okukyusa ekintu kyonna ku nkyukakyuka za Sass ne maapu mu custom.scss. Osobola n’okutandika okwongera ebitundu bya Bootstrap wansi // Optionalw’ekitundu nga bwe kyetaagisa. Tukuwa amagezi okukozesa omutambi gw'okuyingiza mu bujjuvu okuva mu bootstrap.scssfayiro yaffe ng'entandikwa yo.

Enkyukakyuka ezisookerwako

Buli nkyukakyuka ya Sass mu Bootstrap erimu !defaultbendera ekusobozesa okusazaamu omuwendo gw'enkyukakyuka ogusookerwako mu Sass yo nga tokyusizza nsibuko ya Bootstrap. Koppa era oteeke enkyukakyuka nga bwe kyetaagisa, kyusa emiwendo gyazo, era oggyewo !defaultbendera. Singa enkyukakyuka eba yaweebwa dda, olwo tejja kuddamu kuweebwa miwendo egy'enjawulo mu Bootstrap.

Ojja kusanga olukalala lw'enkyukakyuka za Bootstrap mu bujjuvu mu scss/_variables.scss. Enkyukakyuka ezimu ziteekebwa ku null, enkyukakyuka zino tezifulumya kintu okuggyako nga zisuuliddwa mu nsengeka yo.

Variable overrides zirina okujja oluvannyuma lw'emirimu gyaffe okuyingizibwa, naye nga tebannaba kuyingiza bisigadde.

Wano waliwo ekyokulabirako ekikyusa background-colorne colorfor the <body>nga oyingiza n'okukung'aanya Bootstrap okuyita mu 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/maps";
@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

Ddamu nga bwe kyetaagisa ku nkyukakyuka yonna mu Bootstrap, nga mw'otwalidde n'enkola z'ensi yonna wansi.

Tandika ne Bootstrap ng'oyita ku npm ne pulojekiti yaffe ey'okutandika! Yolekera twbs/bootstrap-npm-starter template repository olabe engeri y'okuzimba n'okulongoosa Bootstrap mu pulojekiti yo eya npm. Mulimu omukung'aanya wa Sass, Autoprefixer, Stylelint, PurgeCSS, ne Ebifaananyi bya Bootstrap.

Maapu ne loopu

Bootstrap erimu maapu za Sass ntono, ebisumuluzo ebibiri ebiyamba okukola amaka ga CSS ekwatagana. Tukozesa maapu za Sass ku langi zaffe, ebifo ebikutukamu giridi, n’ebirala. Nga enkyukakyuka za Sass, maapu zonna eza Sass zirimu !defaultbendera era zisobola okukyusibwa n’okugaziwa.

Ezimu ku maapu zaffe eza Sass zigattibwa ne zifuuka empty by default. Kino kikolebwa okusobozesa okugaziya okwangu okwa maapu ya Sass eweereddwa, naye kijja ku muwendo gw’okufuula okuggya ebintu ku maapu okukaluba katono.

Okukyusa mu maapu

Enkyukakyuka zonna mu $theme-colorsmaapu zitegeezebwa nga enkyukakyuka eziyimiridde zokka. Okukyusa langi eriwo mu $theme-colorsmaapu yaffe, yongera bino wammanga ku fayiro yo eya Sass eya bulijjo:

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

Oluvannyuma, enkyukakyuka zino ziteekebwa mu $theme-colorsmaapu ya Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Okwongera ku maapu

Yongera langi empya ku $theme-colors, oba maapu endala yonna, ng’okola maapu empya eya Sass n’emiwendo gyo egy’enjawulo n’ogigatta ne maapu eyasooka. Mu mbeera eno, tujja kukola $custom-colorsmaapu empya tugigatta ne $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Ggyawo ku maapu

Okuggya langi ku $theme-colors, oba ku maapu endala yonna, kozesa map-remove. Kimanye nti olina okuyingiza $theme-colorswakati w'ebyetaago byaffe nga wayiseewo okunnyonnyolwa kwayo mu variablesera nga tennakozesebwa mu maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Ebisumuluzo ebyetaagisa

Bootstrap etwala okubeerawo kw’ebisumuluzo ebimu ebitongole munda mu maapu za Sass nga bwe twakozesa era ne tugaziya bino ffekka. Nga bw’olongoosa maapu ezirimu, oyinza okusanga ensobi ekisumuluzo kya maapu ya Sass ekigere we kikozesebwa.

Okugeza, tukozesa primary, success, dangern’ebisumuluzo okuva $theme-colorsku ku biyungo, obutambi, n’embeera za ffoomu. Okukyusa emiwendo gy'ebisumuluzo bino tekirina kuleeta nsonga yonna, naye okubiggyawo kiyinza okuleeta ensonga z'okukung'aanya kwa Sass. Mu mbeera zino, ojja kwetaaga okukyusa mu koodi ya Sass ekozesa emiwendo egyo.

Emirimu

Langi za langi

Okumpi ne maapu za Sass ze tulina, langi z’omulamwa nazo zisobola okukozesebwa nga enkyukakyuka eziyimiriddewo, nga $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Osobola okutangaaza oba okuziba langi nga okozesa Bootstrap's tint-color()ne shade-color()functions. Emirimu gino gijja kutabula langi n’enjeru oba enjeru, obutafaananako native ya Sass lighten()n’emirimu darken()egijja okukyusa obutangaavu n’omuwendo ogugere, ekitera obutaleeta effect eyagala.

// 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));
}

Mu nkola, wandiyise omulimu n’oyisa mu langi n’obuzito parameters.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Okwawukana kwa langi

Okusobola okutuukiriza ebisaanyizo by’enjawulo ebya Web Content Accessibility Guidelines (WCAG) , abawandiisi balina okuwa enjawulo ya langi y’ebiwandiiko esinga obutono eya 4.5:1 n’enjawulo ya langi etali ya biwandiiko esinga obutono eya 3:1 , okuggyako entono nnyo.

Okuyamba ku kino, twassaamu color-contrastomulimu mu Bootstrap. Ekozesa enkola ya WCAG ey’omugerageranyo gw’enjawulo okubala ebipimo by’enjawulo nga byesigamiziddwa ku kitangaala ekituufu mu kifo kya sRGBlangi okuzzaawo mu ngeri ey’otoma langi y’enjawulo eyaka ( #fff), enzirugavu ( #212529) oba enzirugavu ( #000) okusinziira ku langi y’omusingi eragiddwa. Omulimu guno gwa mugaso nnyo naddala ku mixins oba loops nga okola classes eziwera.

Okugeza, okukola ebifaananyi bya langi okuva ku $theme-colorsmaapu yaffe:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Era esobola okukozesebwa ku byetaago by’enjawulo eby’omulundi gumu:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Osobola n'okulaga langi ey'omusingi n'emirimu gyaffe egya maapu ya langi:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Okutoloka ku SVG

Tukozesa escape-svgomulimu okutoloka <, >n'ennukuta #z'ebifaananyi eby'emabega ebya SVG. Nga okozesa escape-svgomulimu, data URIs zirina okujulizibwa.

Emirimu gy’okugatta n’okuggyako

Tukozesa emirimu gya addne subtractokuzinga omulimu gwa CSS calc. Ekigendererwa ekikulu eky’emirimu gino kwe kwewala ensobi ng’omuwendo “ogutaliiko yuniti” 0guyisibwa mu calckigambo. Ebigambo nga calc(10px - 0)bijja kuzzaayo ensobi mu bulawuzi zonna, wadde nga bituufu mu kubala.

Okugeza awali calc entuufu:

$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);
}

Eky’okulabirako nga calc si ntuufu:

$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);
}

Ebirungo ebitabuddwa

Dayirekita yaffe scss/mixins/erina ttani ya mixins eziwa amaanyi ebitundu bya Bootstrap era nga nazo zisobola okukozesebwa mu pulojekiti yo yonna.

Ensengeka za langi

A shorthand mixin for the prefers-color-schememedia query eriwo n'obuwagizi bwa light, dark, n'ensengeka za langi ez'enjawulo.

@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
  }
}