Sass

Ampiasao ny rakitra Sass loharanontsika mba hanararaotra ireo fari-pahalalana, sari-tany, fifangaroana, ary fiasa hanampiana anao hanorina haingana kokoa sy hanamboatra ny tetikasanao.

Amin'ity pejy ity

Ampiasao ny rakitra Sass loharano ananantsika mba hanararaotra ireo fari-pahalalana, sarintany, mixins, sy ny maro hafa.

Rafitra fichier

Raha azo atao dia aza manova ny rakitra fototra an'ny Bootstrap. Ho an'i Sass, midika izany fa mamorona ny stylesheet anao manokana izay manafatra Bootstrap mba hahafahanao manova sy manitatra azy. Raha heverinao fa mampiasa mpitantana fonosana toa ny npm ianao dia hanana firafitry ny rakitra toa izao:

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

Raha naka ny rakitra loharanonay ianao ary tsy mampiasa mpitantana fonosana dia te-hamorona zavatra mitovy amin'io rafitra io amin'ny tananao ianao, mitazona ny rakitra loharanon'i Bootstrap misaraka amin'ny anao.

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

fanafarana

Ao amin'ny custom.scss, hampidirinao ny rakitra Sass loharanon'i Bootstrap. Manana safidy roa ianao: ampidiro ny Bootstrap rehetra, na safidio ny ampahany ilainao. Mamporisika ity farany izahay, na dia tadidio aza fa misy fepetra sy fiankinan-doha amin'ny singa rehetra. Mila mampiditra JavaScript ho an'ny plugins ihany koa ianao.

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

Miaraka amin'io fananganana io dia azonao atao ny manomboka manova ny fari-piadidiana sy sarintany Sass ao amin'ny custom.scss. Azonao atao koa ny manomboka manampy ampahany amin'ny Bootstrap eo ambanin'ny // Optionalfizarana raha ilaina. Manoro hevitra izahay ny hampiasa ny stack fanafarana feno avy amin'ny bootstrap.scssrakitray ho toy ny fanombohana anao.

Variable defaults

Ny fari-piadidiana Sass rehetra ao amin'ny Bootstrap dia ahitana ny !defaultsaina mamela anao hanilika ny sandan'ny default amin'ny Sass anao manokana nefa tsy manova ny kaody loharanon'ny Bootstrap. Adikao sy apetaho ny variables raha ilaina, ovao ny sandany ary esory ny !defaultsaina. Raha efa voatendry ny variable iray, dia tsy haverina amin'ny alàlan'ny sanda default ao amin'ny Bootstrap izany.

Ho hitanao ny lisitry ny faribolan'ny Bootstrap ao amin'ny scss/_variables.scss. Ny variables sasany dia apetraka amin'ny null, tsy mamoaka ny fananana ireo fari-piainana ireo raha tsy voafafa ao amin'ny configuration-nao.

Tsy maintsy tonga aorian'ny fanafarana ny asantsika ny fanodinkodinana miovaova, fa alohan'ny fanafarana hafa.

Ity misy ohatra iray izay manova ny background-colorsy colorny <body>rehefa manafatra sy manangona Bootstrap amin'ny 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

Avereno araka izay ilaina amin'ny variable rehetra ao amin'ny Bootstrap, ao anatin'izany ireo safidy manerantany eto ambany.

Manomboha amin'ny Bootstrap amin'ny alàlan'ny npm miaraka amin'ny tetikasa fanombohana! Mankanesa any amin'ny tranokala môdely twbs/bootstrap-npm-starter mba hahitana ny fomba fananganana sy fanamboarana Bootstrap amin'ny tetikasa npm anao manokana. Ahitana Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ary kisary Bootstrap.

Sarintany sy tadivavarana

Ny Bootstrap dia ahitana sarintany Sass vitsivitsy, tsiroaroa manan-danja izay manamora ny famokarana fianakaviana CSS mifandraika. Mampiasa sari-tany Sass izahay ho an'ny lokonay, ny teboka tapaka, ary ny maro hafa. Tahaka ny fari-pahaizan'i Sass, ny sarintany Sass rehetra dia misy ny !defaultsaina ary azo ovaina sy itarina.

Ny sasany amin'ireo sari-tany Sass dia natambatra ho tsy misy na inona na inona. Izany dia natao mba hamelana mora ny fanitarana ny sari-tany Sass nomena, fa tonga amin'ny sandan'ny fanalana zavatra amin'ny sari-tany ho sarotra kokoa.

Ovao sari-tany

Ny fari-piainana rehetra ao amin'ny $theme-colorssari-tany dia faritana ho fari-piainana tokana. Raha hanova loko efa misy ao amin'ny $theme-colorssari-tany, ampio ity manaraka ity amin'ny rakitra Sass mahazatra anao:

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

$theme-colorsTaty aoriana dia napetraka ao amin'ny sarintanin'i Bootstrap ireto fari-pahalalana ireto :

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

Ampio amin'ny sari-tany

Manampia loko vaovao amin'ny $theme-colors, na sarintany hafa, amin'ny famoronana sari-tany Sass vaovao miaraka amin'ny soatoavinao manokana ary manambatra azy amin'ny sari-tany voalohany. Amin'ity tranga ity dia hamorona $custom-colorssari-tany vaovao isika ary hanambatra azy amin'ny $theme-colors.

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

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

Esory amin'ny sari-tany

Ampiasao $theme-colorsny map-remove. Tandremo fa tsy maintsy ampidirinao $theme-colorseo anelanelan'ny fepetra takinay ianao aorian'ny famaritana azy ao variablessy alohan'ny fampiasana azy amin'ny 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

Fanalahidy ilaina

Bootstrap dia mihevitra ny fisian'ny fanalahidy manokana ao anatin'ny sarintany Sass rehefa nampiasa sy nanitatra azy ireo izahay. Rehefa manamboatra ny sari-tany tafiditra ianao dia mety hahita lesoka izay ampiasaina ny fanalahidin'ny sarintany Sass manokana.

Ohatra, mampiasa ny primary, success, ary ny dangerlakile avy $theme-colorsamin'ny rohy, bokotra ary endrika. Ny fanoloana ny soatoavin'ireo fanalahidy ireo dia tsy tokony hiteraka olana, fa ny fanesorana azy ireo dia mety hiteraka olana amin'ny fanangonana Sass. Amin'ireo tranga ireo dia mila manova ny kaody Sass izay mampiasa ireo soatoavina ireo ianao.

asa

loko

Eo akaikin'ny sarintany Sass ananantsika, ny loko lohahevitra dia azo ampiasaina ho fari-pahaizan-tena manokana, toy ny $primary.

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

Azonao atao ny manamaivana na manamaizina ny loko miaraka amin'ny Bootstrap's tint-color()and shade-color()functions. Ireo fiasa ireo dia hampifangaro loko amin'ny mainty na fotsy, fa tsy toy ny teratany lighten()sy darken()ny fiasan'i Sass izay hanova ny fahamaivanana amin'ny isa voafaritra, izay matetika tsy mitondra any amin'ny vokatra tadiavina.

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

Amin'ny fampiharana, hiantso ny fiasa ianao ary ampidiro ny loko sy lanja.

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

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

Mifanohitra amin'ny loko

Mba hahafeno ny fepetra takian'ny Web Content Accessibility Guidelines (WCAG) , ny mpanoratra dia tsy maintsy manome fifanoherana kely indrindra amin'ny lokon'ny lahatsoratra amin'ny 4.5:1 sy ny fifanoherana kely indrindra amin'ny loko tsy misy soratra amin'ny 3:1 , tsy misy afa-tsy vitsivitsy.

Mba hanampiana amin'izany dia nampidirinay color-contrasttao amin'ny Bootstrap ny fiasa. Mampiasa ny algorithm tahan'ny fifanoherana WCAG izy io amin'ny kajy ny tokonam-baravaran'ny fifanoherana mifototra amin'ny famirapiratana eo amin'ny sRGBhabaka loko iray mba hamerenana ho azy ny loko mifanohitra mazava ( #fff), maizina ( #212529) na mainty ( #000) mifototra amin'ny loko fototra voatondro. Ity fiasa ity dia ilaina indrindra ho an'ny mixins na loop izay mamorona kilasy maromaro.

Ohatra, mba hamorona sarintany miloko avy amin'ny $theme-colorssari-tany:

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

Azo ampiasaina amin'ny filàna fifanoherana tokana ihany koa izy io:

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

Azonao atao ihany koa ny mamaritra loko fototra amin'ny fiasan'ny sarintany miloko:

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

Mandosira SVG

Ampiasainay ny fampiasa escape-svgmba handosirana ny <, >sy #ny tarehin-tsoratra ho an'ny sary lafika SVG. Rehefa mampiasa ny escape-svgasa, dia tsy maintsy tononina ny data URI.

Ampio sy fanalana asa

Mampiasa ny addand subtractfunctions izahay mba hametahana ny calcasa CSS. 0Ny tanjona voalohany amin'ireo asa ireo dia ny hisorohana ny hadisoana rehefa ampidirina amin'ny fiteny iray ny sanda "tsy tokana" calc. Ny teny toy ny calc(10px - 0)dia hamerina hadisoana amin'ny navigateur rehetra, na dia marina ara-matematika aza.

Ohatra izay manankery ny kalk:

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

Ohatra tsy mety ny calc:

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

Mixins

Ny scss/mixins/lahatahiry anay dia manana mixins marobe izay manome hery ny ampahany amin'ny Bootstrap ary azo ampiasaina amin'ny tetikasanao manokana ihany koa.

Tetika loko

Misy fifangaroana fohy ho an'ny prefers-color-schemefangatahan'ny haino aman-jery miaraka amin'ny fanohanana ny light, dark, ary ny rafitra loko mahazatra.

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