Sass
Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pamitundu yosiyanasiyana, mamapu, zosakaniza, ndi ntchito kuti zikuthandizeni kupanga mwachangu ndikusintha pulojekiti yanu.
Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pazosintha, mamapu, zosakaniza, ndi zina zambiri.
Mapangidwe a fayilo
Ngati n'kotheka, pewani kusintha mafayilo amtundu wa Bootstrap. Kwa Sass, izi zikutanthauza kupanga zolemba zanu zomwe zimalowetsa Bootstrap kuti mutha kusintha ndikuwonjezera. Pongoganiza kuti mukugwiritsa ntchito phukusi loyang'anira ngati npm, mudzakhala ndi fayilo yomwe imawoneka motere:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ngati mwatsitsa mafayilo athu oyambira ndipo simukugwiritsa ntchito woyang'anira phukusi, mudzafuna kukhazikitsa pamanja china chofanana ndi mawonekedwewo, kusunga mafayilo amtundu wa Bootstrap kukhala osiyana ndi anu.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Kuitanitsa
M'mafayilo anu custom.scss
, mudzalowetsa mafayilo a Sass a Bootstrap. Muli ndi njira ziwiri: kuphatikiza zonse za Bootstrap, kapena sankhani magawo omwe mukufuna. Timalimbikitsa omalizawa, ngakhale dziwani kuti pali zofunika zina ndi zodalira pazigawo zathu zonse. Muyeneranso kuphatikiza JavaScript yamapulagini athu.
// 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
Ndi kukhazikitsa komweko, mutha kuyamba kusintha zosintha zilizonse za Sass ndi mamapu anu custom.scss
. Mutha kuyambanso kuwonjezera magawo a Bootstrap pansi // Optional
pagawo ngati pakufunika. Tikukulangizani kuti mugwiritse ntchito stack yonse kuchokera mufayilo yathu bootstrap.scss
ngati poyambira.
Zosintha zosinthika
Kusintha kulikonse kwa Sass mu Bootstrap kumaphatikizapo !default
mbendera yomwe imakulolani kuti mupitirire mtengo wosasinthika wa Sass yanu popanda kusintha magwero a Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani zikhalidwe zawo, ndikuchotsa !default
mbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi zokhazikika mu Bootstrap.
Mupeza mndandanda wathunthu wazosintha za Bootstrap mu scss/_variables.scss
. Zosintha zina zimayikidwa ku null
, zosinthazi sizitulutsa katundu pokhapokha zitatsitsidwa pamasinthidwe anu.
Zosintha zosinthika ziyenera kubwera pambuyo poti ntchito zathu zatumizidwa kunja, koma zina zonse zisanachitike.
Nachi chitsanzo chomwe chimasintha ndikulowetsa background-color
ndikulowetsa Bootstrap kudzera npm:color
<body>
// 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
Bwerezani ngati kuli kofunikira pakusintha kulikonse mu Bootstrap, kuphatikiza zosankha zapadziko lonse lapansi pansipa.
Mapu ndi malupu
Bootstrap imaphatikizapo mamapu ochepa a Sass, awiriawiri ofunika kwambiri omwe amapangitsa kuti zikhale zosavuta kupanga mabanja a CSS yogwirizana. Timagwiritsa ntchito mamapu a Sass pamitundu yathu, mapulaneti a gridi, ndi zina zambiri. Monga zosinthika za Sass, mamapu onse a Sass amaphatikiza !default
mbendera ndipo amatha kuchotsedwa ndikukulitsidwa.
Ena mwa mamapu athu a Sass amaphatikizidwa kukhala opanda kanthu mwachisawawa. Izi zimachitika kuti zilole kukulitsa kosavuta kwa mapu a Sass, koma zimabwera pamtengo wopangitsa kuchotsa zinthu pamapu kukhala kovuta kwambiri.
Sinthani mapu
Zosintha zonse $theme-colors
pamapu zimatanthauzidwa ngati zosintha zokha. Kuti musinthe mtundu womwe ulipo $theme-colors
pamapu athu, onjezani zotsatirazi pafayilo yanu yamtundu wa Sass:
$primary: #0074d9;
$danger: #ff4136;
Pambuyo pake, zosinthazi zimayikidwa $theme-colors
pamapu a Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Onjezani ku mapu
Onjezani mitundu yatsopano ku $theme-colors
, kapena mapu ena aliwonse, popanga mapu atsopano a Sass ndi makonda anu ndikuphatikiza ndi mapu oyamba. Pamenepa, tipanga $custom-colors
mapu atsopano ndikuwaphatikiza ndi $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Chotsani pamapu
Kuti muchotse mitundu pa $theme-colors
, kapena mapu ena aliwonse, gwiritsani ntchito map-remove
. Dziwani kuti muyenera kuyiyika pakati pa zomwe tikufuna ndi zomwe mungasankhe:
// 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
Makiyi ofunikira
Bootstrap imatengera kukhalapo kwa makiyi ena mkati mwa mamapu a Sass momwe timagwiritsira ntchito ndikuwonjezera tokha. Mukamasintha mamapu omwe akuphatikizidwa, mutha kukumana ndi zolakwika pomwe kiyi ya mapu a Sass ikugwiritsidwa ntchito.
Mwachitsanzo, timagwiritsa ntchito primary
, success
, ndi danger
makiyi ochokera $theme-colors
ku maulalo, mabatani, ndi mawonekedwe a fomu. Kusintha makiyi a makiyiwa sikuyenera kubweretsa zovuta, koma kuwachotsa kungayambitse zovuta za Sass. Muzochitika izi, muyenera kusintha nambala ya Sass yomwe imagwiritsa ntchito mfundozo.
Ntchito
Mitundu
Pafupi ndi mamapu a Sass omwe tili nawo, mitundu yamutu imatha kugwiritsidwanso ntchito ngati mitundu yoyimirira, monga $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Mutha kuwunikira kapena kudetsa mitundu ndi Bootstrap tint-color()
ndi shade-color()
ntchito. Ntchitozi zidzasakaniza mitundu ndi yakuda kapena yoyera, mosiyana ndi mbadwa za Sass lighten()
ndi darken()
ntchito zomwe zidzasintha kuwala ndi kuchuluka kokhazikika, zomwe nthawi zambiri sizimayambitsa zotsatira zomwe mukufuna.
// 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));
}
M'malo mwake, mutha kuyimba ntchitoyi ndikudutsa magawo amtundu ndi kulemera.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kusiyana kwamitundu
Kuti akwaniritse miyezo ya WCAG 2.0 yofikira kusiyanitsa mitundu , olemba ayenera kupereka chiyerekezo chosiyana cha osachepera 4.5:1 , kupatulapo ochepa kwambiri.
Ntchito yowonjezera yomwe timaphatikizapo mu Bootstrap ndi ntchito yosiyanitsa mitundu, color-contrast
. Imagwiritsa ntchito ma aligorivimu a WCAG 2.0 powerengera molingana ndi kuwala kwamtundu sRGB
wamtundu kuti ibwezere yokha kuwala ( #fff
), mdima ( #212529
) kapena wakuda ( #000
) wosiyanitsa kutengera mtundu womwe watchulidwa. Izi ndizofunikira makamaka pazosakaniza kapena malupu pomwe mukupanga makalasi angapo.
Mwachitsanzo, kupanga zosintha zamitundu $theme-colors
pamapu athu:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Itha kugwiritsidwanso ntchito pazosowa zosiyanitsa kamodzi:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Mutha kutchulanso mtundu woyambira ndi mapu athu amitundu:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Kuthawa SVG
Timagwiritsa ntchito escape-svg
ntchitoyi kuthawa <
, >
ndi #
zilembo zazithunzi zakumbuyo za SVG. Mukamagwiritsa ntchito escape-svg
ntchitoyi, ma URI a data ayenera kutchulidwa.
Onjezani ndi Kuchotsa ntchito
Timagwiritsa ntchito add
ndi subtract
ntchito kukulunga ntchito ya CSS calc
. Cholinga chachikulu cha ntchitoyi ndikupewa zolakwika pamene mtengo wa "unitless" uperekedwa 0
m'mawu calc
. Mawu ngati calc(10px - 0)
angabweretse cholakwika mu asakatuli onse, ngakhale ali olondola masamu.
Chitsanzo pomwe calc ili yoyenera:
$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);
}
Chitsanzo pomwe calc ndi yolakwika:
$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);
}
Zosakaniza
Chikwatu chathu scss/mixins/
chili ndi matani osakanikirana omwe amalimbitsa magawo a Bootstrap ndipo atha kugwiritsidwanso ntchito pa polojekiti yanu.
Mitundu yamitundu
Kusakaniza kwachidule kwafunso lawayilesi prefers-color-scheme
kumapezeka ndi chithandizo cha light
, dark
, ndi makonda amitundu.
@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
}
}