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.
Sebelisa lifaele tsa rona tsa mohloli oa 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, ho boloka 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";
@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
Ha seta seo se se se le teng, o ka qala ho fetola mefuta le limmapa tsa Sass ho custom.scss. U ka boela ua qala ho eketsa likarolo tsa Bootstrap tlas'a // Optionalkarolo ha ho hlokahala. Re etsa tlhahiso ea 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 e sa tšoaneng 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 tlosa lintho 'mapeng ho be thata haholoanyane.
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 e kenya lipakeng tsa litlhoko tsa rona le likhetho tsa rona:
// 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
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;
}
O ka khantša kapa oa 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 ho finyella litekanyetso tsa phihlello tsa WCAG 2.0 bakeng sa phapang ea mebala , bangoli ba tlameha ho fana ka tekanyo ea phapang ea bonyane 4.5:1 , ntle le mekhelo e fokolang haholo.
Mosebetsi o mong oo re o kenyelletsang ho Bootstrap ke mosebetsi oa ho bapisa mebala, color-contrast. E sebelisa algorithm ea WCAG 2.0 ho bala litekanyo tse fapaneng ho ipapisitsoe le khanya e lekanyelitsoeng sebakeng sa sRGBmebala ho khutlisa khanya ( #fff), e lefifi ( #212529) kapa e ntšo ( #000) 'mala o fapaneng o ipapisitseng 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 mosebetsi oa 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
}
}