in English

Sass jedhama

Jijjiiramoota, kaartaa, mixins, fi faankishiniiwwan saffisaan ijaaruu fi pirojektii kee dhuunfachiisuuf si gargaaran fayyadamuuf faayiloota Sass madda keenya fayyadami.

Fuula kana irratti

Jijjiiramoota, kaartaa, mixins, fi kkf fayyadamuuf faayiloota Sass madda keenya fayyadami.

Caasaa faayilii

Yeroo danda'ametti, faayiloota ijoo Bootstrap fooyyessuu irraa fagaadhu. Sass'f, sun jechuun akkaataa mataa keetii kan Bootstrap galchu uumuu jechuudha akka ati fooyyessuu fi dheeressuu dandeessuuf. Geggeessaa paakeejii akka npm fayyadamaa jirta jennee yoo fudhanne, caasaa faayilii akkas fakkaatu ni qabaatta:

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

Yoo faayiloota madda keenya buufattee fi geggeessaa paakeejii hin fayyadamne ta'e, faayiloota madda Bootstrap kan kee irraa adda baasuun, waan caasaa sanaa wajjin walfakkaatu harkaan qindeessuu barbaadda.

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

Galchuu

Keessan keessatti custom.scss, faayiloota Sass madda Bootstrap galchita. Filannoo lama qabda: Bootstrap hunda hammachiisi, ykn kutaalee si barbaachisan filadhu. Kanneen lammaffaa ni jajjabeessina, qaamolee keenya hunda keessatti ulaagaalee fi hirkattummaa tokko tokko akka jiran beekaa ta'us. Akkasumas JavaScript tokko tokko plugins keenyaaf dabaluu si barbaachisa.

// 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";
@import "../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS 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";

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

// 6. Add additional custom code here

Qindaa'inni sun bakka jirutti, jijjiiramoota Sass fi kaartaa kamiyyuu fooyyessuu jalqabuu dandeessa custom.scss. // OptionalAkkasumas kutaalee Bootstrap kutaa jalatti akka barbaachisummaa isaatti dabaluu jalqabuu dandeessa . Tuuta galchuu guutuu bootstrap.scssfaayilii keenya irraa akka ka'umsa keetti fayyadamuu yaada kennina.

Durtii jijjiiramaa

Jijjiiramaan Sass hundi Bootstrap keessatti !defaultalaabaa gatii durtii jijjiiramaa Sass mataa kee keessatti osoo koodii madda Bootstrap hin fooyyessin akka irra darbitu si dandeessisu of keessatti qabata. Jijjiiramoota akka barbaachisummaa isaatti waraabii fi maxxansi, gatiiwwan isaanii fooyyessi, fi !defaultalaabaa haqi. Yoo jijjiiramaan duraan ramadame, kana booda gatiiwwan durtii Bootstrap keessatti argamaniin irra deebi'amee hin ramadamu.

Tarree guutuu jijjiiramoota Bootstrap keessatti ni argattu scss/_variables.scss. Jijjiiramoonni tokko tokko gara tti qindaa'u null, jijjiiramoonni kun qindeessaa kee keessatti yoo irra darbaman malee qabeentaa hin baasan.

Jijjiiramaan irra darbuun erga faankishiniiwwan keenya galfamaniin booda dhufuu qaba, garuu galteewwan hafan dura.

Fakkeenyi yeroo Bootstrap karaa npm galchuu fi qindeessuu fi background-colorkan colorjijjiiru kunooti:<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";
@import "../node_modules/bootstrap/scss/root";

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

Jijjiiramaa kamiyyuu Bootstrap keessatti akka barbaachisummaa isaatti irra deebi'i, filannoowwan waliigalaa armaan gadii dabalatee.

Bootstrap karaa npm pirojektii jalqabaa keenyaa wajjin jalqabi! Akkaataa Bootstrap pirojektii npm mataa keetii keessatti ijaaruu fi dhuunfachuu ilaaluuf gara kuusaa unkaa twbs/bootstrap-npm-starter qajeeli . Qindeessaa Sass, Durtii Ofiin, Stylelint, PurgeCSS, fi Mallattoolee Bootstrap of keessatti qabata.

Kaartaa fi loopoota

Bootstrap kaartaa Sass muraasa, lamaan gatii furtuu maatii CSS walqabatan uumuuf salphaa taasisan of keessatti qabata. Halluuwwan keenyaaf, qabxiiwwan ciccitaa giiridii fi kkf kaartaa Sass fayyadamna. Akkuma jijjiiramoota Sass, kaartoonni Sass hundi !defaultalaabaa of keessatti qabatanii irra darbuu fi dheerachuu danda'u.

Kaartoonni Sass keenya tokko tokko akka durtiitti gara duwwaatti walitti makamu. Kunis kaartaa Sass kenname salphaatti babal'isuuf kan raawwatamu yoo ta'u, garuu baasii wantoota kaartaa irraa buqqisuun xiqqoo rakkisaa taasisuun dhufa.

Kaartaa fooyyessuu

Jijjiiramoonni $theme-colorskaartaa keessa jiran hundi akka jijjiiramoota of danda'anitti ibsamu. Halluu kaartaa keenya keessatti jiru fooyyessuuf $theme-colors, faayilii Sass amala kee irratti kanneen armaan gadii dabali:

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

Boodarra, jijjiiramoonni kun $theme-colorskaartaa Bootstrap keessatti saagamu:

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

Kaartaa irratti dabali

Halluuwwan haaraa gara $theme-colors, ykn kaartaa biroo kamiyyuutti dabali, kaartaa Sass haaraa gatiiwwan amala keetiin uumuu fi kaartaa jalqabaa wajjin walitti makuudhaan. Haala kana keessatti, $custom-colorskaartaa haaraa uumnee $theme-colors.

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

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

Kaartaa irraa kaasi

$theme-colorsHalluuwwan , ykn kaartaa biroo kamiyyuu irraa haquuf , fayyadami map-remove. Ulaagaalee fi filannoowwan keenya gidduutti galchuu akka qabdan beekaa:

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

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

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

Furtuuwwan barbaachisan

Bootstrap akka nuti fayyadamnetti furtuuwwan addaa tokko tokko kaartaa Sass keessa jiraachuu isaanii fudhatee ofuma keenyaan kanneen dheeressina. Yeroo kaartaa hammataman dhuunfattu, bakka furtuun kaartaa Sass murtaa'e fayyadamaa jirutti dogongorri si mudachuu danda'a.

Fakkeenyaaf, primary, success, fi dangerfurtuuwwan irraa $theme-colorshidhannoowwan, qareewwanii fi haalata unkaaf fayyadamna. Gatii furtuuwwan kanaa bakka buusuun dhimma tokkollee dhiyeessu hin qabu, garuu isaan haquun dhimmoota qindeessaa Sass fiduu danda'a. Fakkeenyota kana keessatti, koodii Sass kan gatiiwwan sana fayyadamu fooyyessuu si barbaachisa.

Faankishiniiwwan

Halluuwwan

Kaartaa Sass qabnu cinatti , halluuwwan mata duree akka jijjiiramoota of danda'aniis fayyadamuun ni danda'ama, akka $primary.

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

tint-color()Bootstrap's fi shade-color()faankishiniiwwaniin halluuwwan ibsuu ykn dukkaneessuu dandeessa . Faankishiniiwwan kun halluuwwan gurraacha ykn adii waliin ni makamu, dhaloota Sass lighten()fi darken()faankishiniiwwan salphaa hamma murtaa'een jijjiiran irraa adda, kunis yeroo baay'ee bu'aa barbaadamutti hin geessu.

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

Qabatamaan, faankishinii waamtee qajoojiiwwan halluu fi ulfaatinaa keessa darbita.

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

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

Faallaa halluu

Ulaagaalee dhaqqabummaa WCAG 2.0 walfaallaa halluu guutuuf , barreessitoonni yoo xiqqaate reeshiyoo walfaallaa 4.5:1 kennuu qabu , baayyee muraasa irraa kan hafe.

Faankishiniin dabalataa Bootstrap keessatti hammannu faankishinii walfaallaa halluu, color-contrast. Innis halluu bu'uuraa ibsame irratti hundaa'uun halluu walfaallaa ifa ( ), dukkanaa'aa ( ) ykn gurraacha ( ) ofumaan deebisuuf iddoo halluu keessatti ifaa firaakshinii irratti hundaa'uun ulaagaalee walfaallaa shallaguuf algoritmiin WCAG 2.0 fayyadama. Faankishiniin kun keessumaa mixins ykn loops bakka ati gita hedduu uumuuf faayidaa qaba.sRGB#fff#212529#000

Fakkeenyaaf, $theme-colorskaartaa keenya irraa sajoo halluu uumuuf:

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

Akkasumas fedhii walfaallaa yeroo tokkootiif fayyadamuu ni danda'a:

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

Akkasumas faankishiniiwwan kaartaa halluu keenyaatiin halluu bu'uuraa ifteessuu dandeessa:

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

SVG irraa miliquu

escape-svgFaankishinii <, >fi #arfiilee fakkiiwwan duubbee SVG miliquuf fayyadamna . Yeroo escape-svgfaankishinii fayyadamtu, URIwwan deetaa caqafamuu qabu.

Faankishiniiwwan Dabaluu fi Hir'isuu

Faankishinii CSS marsuuf faankishinii addfi fayyadamna . Kaayyoon jalqabaa faankishiniiwwan kanaa yeroo gatii “yunitii hin qabne” gara ibsaatti darbu dogongora akka hin uumamneefidha. Ibsitoonni akka dogongora biraawzaroota hunda keessatti deebisa, herregaan sirrii ta'us.subtractcalc0calccalc(10px - 0)

Fakkeenya bakka calc sirrii ta'etti:

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

Fakkeenya bakka calc sirrii hin taane:

$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 jedhaman

Daayirektariin keenya scss/mixins/mixins toonii tokko kan kutaalee Bootstrap humna kennan kan qabuu fi akkasumas pirojektii mataa keessanii hunda keessatti fayyadamuu dandeessu.

Iskiimota halluu

Gaaffii miidiyaaf mixin gabaabduu deeggarsa , , fi iskiimota halluu amala prefers-color-schemewaliin argama .lightdark

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