Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Sass

Sebelisa mohloli oa rona oa lifaele tsa Sass ho nka monyetla ka mefuta e fapaneng, limmapa, metsoako le mesebetsi ho u thusa ho aha kapele le ho etsa projeke ea hau.

Leqepheng lena

Sebelisa mohloli oa rona oa lifaele tsa Sass ho nka monyetla ka mefuta e fapaneng, limmapa, metsoako, le tse ling.

Sebopeho sa faele

Nako le nako ha ho khonahala, qoba ho fetola lifaele tsa mantlha tsa Bootstrap. Bakeng sa Sass, seo se bolela ho iketsetsa leqephe la setaele le kenyang Bootstrap kantle ho naha hore o tle o le fetole le ho le atolosa. Ho nka hore o sebelisa mookameli oa sephutheloana joalo ka npm, o tla ba le sebopeho sa faele se shebahalang tjena:

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

Haeba u khoasollotse lifaele tsa rona tsa mohloli 'me u sa sebelise mookameli oa sephutheloana, u tla batla ho iketsetsa ntho e tšoanang le sebopeho seo, u boloke lifaele tsa mohloli oa Bootstrap li arohane le tsa hau.

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

Ho reka kantle

Ho custom.scss, o tla kenya lifaele tsa Sass tsa Bootstrap. U na le likhetho tse peli: kenyelletsa Bootstrap kaofela, kapa khetha likarolo tseo u li hlokang. Re khothaletsa ba bang, leha ho le joalo hlokomela hore ho na le litlhokahalo le litšepeho ho likarolo tsa rona. Hape o tla hloka ho kenyelletsa JavaScript bakeng sa li-plugins tsa rona.

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

Ha seta seo se se se le teng, o ka qala ho fetola mefuta efe kapa efe ea Sass le limmapa tsa hau custom.scss. U ka qala ho eketsa likarolo tsa Bootstrap tlasa // Optionalkarolo kamoo ho hlokahalang. Re fana ka maikutlo a ho sebelisa stack e felletseng e tsoang bootstrap.scssfaeleng ea rona e le sebaka sa hau sa ho qala.

Likhetho tse feto-fetohang

Phapang e 'ngoe le e' ngoe ea Sass ho Bootstrap e kenyelletsa !defaultfolakha e u lumellang ho feta boleng ba kamehla ba Sass ea hau ntle le ho fetola khoutu ea mohloli oa Bootstrap. Kopitsa le ho beha mefuta-futa ha ho hlokahala, fetola boleng ba eona, 'me u tlose !defaultfolakha. Haeba phapang e se e abetsoe, joale e ke ke ea abeloa hape ke boleng ba kamehla ho Bootstrap.

U tla fumana lenane le felletseng la mefuta e fapaneng ea Bootstrap ho scss/_variables.scss. Liphetoho tse ling li setiloe ho null, mefuta ena ha e hlahise thepa ntle le haeba e tlositsoe tlhophisong ea hau.

Liphetoho tse feto-fetohang li tlameha ho tla ka mor'a hore mesebetsi ea rona e rekoe, empa pele ho tse ling tse tsoang kantle ho naha.

Mona ke mohlala o fetolang background-colorle colorbakeng sa <body>ha o kenya le ho hlophisa Bootstrap ka 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

Pheta ha ho hlokahala bakeng sa phetoho efe kapa efe ho Bootstrap, ho kenyelletsa le likhetho tsa lefats'e tse ka tlase.

Qala ka Bootstrap ka npm ka projeke ea rona ea ho qala! Tlohela sebakeng sa polokelo ea template ea twbs/bootstrap-npm-starter ho bona mokhoa oa ho aha le ho etsa Bootstrap molemong oa hau oa npm. E kenyeletsa Sass compiler, Autoprefixer, Stylelint, PurgeCSS, le Bootstrap Icons.

Limmapa le loops

Bootstrap e kenyelletsa limmapa tse seng kae tsa Sass, lipara tsa bohlokoa tse etsang hore ho be bonolo ho hlahisa malapa a CSS e amanang. Re sebelisa limmapa tsa Sass bakeng sa mebala ea rona, libaka tsa marang-rang, le tse ling. Joalo ka mefuta e fapaneng ea Sass, limmapa tsohle tsa Sass li kenyelletsa !defaultfolakha 'me li ka hlakoloa le ho atolosoa.

Tse ling tsa limmapa tsa rona tsa Sass li kopantsoe ho ba tse se nang letho ka boiketsetso. Sena se etsoa ho lumella katoloso e bonolo ea 'mapa o fanoeng oa Sass, empa e tla ka litšenyehelo tsa ho etsa hore ho be thata haholoanyane ho tlosa lintho 'mapeng.

Fetola 'mapa

Liphetoho tsohle $theme-colors'mapeng li hlalosoa e le mefuta e ikemetseng. Ho fetola 'mala o teng' $theme-colorsmapa oa rona, kenya tse latelang faeleng ea hau ea tloaelo ea Sass:

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

Hamorao, mefuta ena e behiloe $theme-colors'mapeng oa Bootstrap:

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

Kenya 'mapeng

Kenya mebala e mecha ho $theme-colors, kapa 'mapa ofe kapa ofe, ka ho theha 'mapa o mocha oa Sass ka boleng ba hau le ho o kopanya le 'mapa oa mantlha. Tabeng ena, re tla theha $custom-colors'mapa o mocha ebe re o kopanya le $theme-colors.

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

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

Tlosa 'mapeng

Ho tlosa mebala ho $theme-colors, kapa 'mapeng ofe kapa ofe, sebelisa map-remove. Hlokomela hore o tlameha ho kenya $theme-colorslipakeng tsa litlhoko tsa rona hang kamora tlhaloso ea eona variablesle pele e sebelisoa ho 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

Linotlolo tse hlokahalang

Bootstrap e nka boteng ba linotlolo tse itseng ka har'a limmapa tsa Sass ha re ntse re li sebelisa le ho li atolosa. Ha u ntse u etsa limmapa tse kenyellelitsoeng, u kanna oa kopana le liphoso moo ho sebelisoang senotlolo se itseng sa 'mapa oa Sass.

Mohlala, re sebelisa primary, success, le dangerlinotlolo ho tsoa $theme-colorsbakeng sa lihokelo, likonopo, le li-form state. Ho fetola boleng ba linotlolo tsena ha hoa lokela ho hlahisa mathata, empa ho li tlosa ho ka baka mathata a ho bokella Sass. Maemong ana, o tla hloka ho fetola khoutu ea Sass e sebelisang litekanyetso tseo.

Mesebetsi

Mebala

Haufi le limmapa tsa Sass tseo re nang le tsona, mebala ea sehlooho e ka sebelisoa hape e le mefuta e ikemetseng, joalo ka $primary.

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

U ka khantša kapa ua fifatsa mebala ka Bootstrap tint-color()le shade-color()mesebetsi. Mesebetsi ena e tla kopanya mebala e ntšo kapa e tšoeu, ho fapana le matsoalloa a Sass lighten()le darken()mesebetsi e tla fetola khanya ka palo e tsitsitseng, eo hangata e sa lebiseng phello e lakatsehang.

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

Ka ts'ebetso, o ka letsetsa ts'ebetso mme o fete ka mebala le liparamente tsa boima.

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

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

Phapang ea mebala

E le hore ho finyelloe litlhoko tsa phapano ea Litaelo tsa ho Finyella Likahare tsa Marang-rang (WCAG) , bangoli ba tlameha ho fana ka phapang e fokolang ea mebala ea mongolo ea 4.5:1 le phapang e fokolang ea mebala eo e seng ea mongolo ea 3:1 , ntle le mekhelo e fokolang haholo.

Ho thusa ka sena, re kenyelelitse color-contrasttšebetso ho Bootstrap. E sebelisa WCAG karo-karolelano ea karo-karolelano ea algorithm bakeng sa ho bala menyako ea phapang ho ipapisitsoe le khanya e lekanyelitsoeng sebakeng sa sRGBmebala ho khutlisetsa khanya ( #fff), lefifi ( #212529) kapa 'mala o motšo ( #000) o ipapisitse le 'mala o boletsoeng. Ts'ebetso ena e bohlokoa haholo bakeng sa li-mixins kapa loops moo o hlahisang lihlopha tse ngata.

Mohlala, ho hlahisa li-swatches tsa mebala ho tsoa $theme-colors'mapeng oa rona:

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

E ka boela ea sebelisoa bakeng sa litlhoko tse fapaneng tse fapaneng:

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

U ka boela ua hlakisa 'mala oa motheo ka mesebetsi ea rona ea' mapa oa mebala:

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

Escape SVG

Re sebelisa escape-svgts'ebetso ho baleha <, >le #litlhaku bakeng sa litšoantšo tse ka morao tsa SVG. Ha o sebelisa escape-svgts'ebetso, li-URI tsa data li tlameha ho qotsoa.

Eketsa le ho Ntsha ditshebetso

Re sebelisa addle subtractmesebetsi ho thatela tšebetso ea CSS calc. Sepheo sa mantlha sa mesebetsi ena ke ho qoba liphoso ha boleng ba "unitless" 0bo fetisetsoa calcpolelong. Lipolelo tse joalo calc(10px - 0)li tla khutlisa phoso ho libatli tsohle, leha li nepahetse ka lipalo.

Mohlala moo calc e sebetsang teng:

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

Mohlala moo calc e sa sebetseng:

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

Metsoako

Bukana ea rona scss/mixins/e na le lithane tsa metsoako e matlafatsang likarolo tsa Bootstrap hape e ka sebelisoa ho projeke ea hau.

Merero ea mebala

Motsoako o khuts'oane bakeng sa prefers-color-schemepotso ea mecha ea litaba e fumaneha ka tšehetso bakeng sa light, dark, le mekhoa ea mebala e tloaelehileng.

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