Sass

Erabili gure iturburuko Sass fitxategiak aldagaiak, mapak, nahasketak eta funtzioak aprobetxatzeko, zure proiektua azkarrago eraikitzen eta pertsonalizatzen laguntzeko.

Orrialde honetan

Erabili gure iturburuko Sass fitxategiak aldagaiak, mapak, nahasketak eta abar aprobetxatzeko.

Fitxategien egitura

Ahal den guztietan, saihestu Bootstrap-en oinarrizko fitxategiak aldatzea. Sass-entzat, horrek esan nahi du Bootstrap inportatzen duen zure estilo-orria sortzea, aldatu eta luzatu ahal izateko. npm bezalako pakete-kudeatzaile bat erabiltzen ari zarela suposatuz, honelako fitxategi-egitura izango duzu:

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

Gure iturburu-fitxategiak deskargatu badituzu eta pakete-kudeatzailerik erabiltzen ez baduzu, eskuz sortu nahi duzu egitura horren antzeko zerbait, Bootstrap-en iturburu-fitxategiak zuretik bereizita mantenduz.

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

Inportatzen

Zure custom.scss, Bootstrap-en Sass fitxategiak inportatuko dituzu. Bi aukera dituzu: sartu Bootstrap guztia edo aukeratu behar dituzun piezak. Azken hau bultzatzen dugu, nahiz eta kontutan izan gure osagaietan baldintza eta menpekotasun batzuk daudela. Gure pluginetarako JavaScript batzuk ere sartu beharko dituzu.

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

Konfigurazio hori ezarrita, Sass aldagai eta maparen bat aldatzen has zaitezke zure custom.scss. Bootstrap-en zatiak gehitzen ere has zaitezke // Optionalatalaren azpian behar duzun moduan. Gure bootstrap.scssfitxategiko inportazio-pila osoa abiapuntu gisa erabiltzea gomendatzen dizugu.

Aldagai lehenetsiak

Bootstrap-eko Sass aldagai bakoitzak aldagaiaren !defaultbalio lehenetsia gainidazteko aukera ematen dizu Bootstrap-en zure Sass-en Bootstrap-en iturburu-kodea aldatu gabe. Kopiatu eta itsatsi aldagaiak behar bezala, aldatu haien balioak eta kendu !defaultbandera. Dagoeneko aldagai bat esleitu bada, ez dute berriro esleituko Bootstrap-en balio lehenetsiek.

Bootstrap-en aldagaien zerrenda osoa aurkituko duzu scss/_variables.scss. Aldagai batzuk ezarrita daude null, aldagai hauek ez dute propietatea ateratzen zure konfigurazioan gainidazten ez badira.

Aldagaien ordezkapenak gure funtzioak inportatu ondoren etorri behar dira, baina gainerako inportazioen aurretik.

Hona hemen Bootstrap npm bidez inportatzean eta konpilatzean eta background-coloraldatzen duen adibide bat 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/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

Errepikatu behar den moduan Bootstrap-eko edozein aldagaitan, beheko aukera orokorrak barne.

Hasi Bootstrap-ekin npm bidez gure hasierako proiektuarekin! Zoaz twbs /bootstrap-npm-starter txantiloien biltegira Bootstrap zure npm proiektuan nola eraiki eta pertsonalizatu ikusteko. Sass konpilatzailea, Autoprefixer, Stylelint, PurgeCSS eta Bootstrap ikonoak barne hartzen ditu.

Mapak eta begiztak

Bootstrap-ek Sass mapa batzuk biltzen ditu, erlazionatutako CSS familiak sortzea errazten duten gako-balioen bikoteak. Sass mapak erabiltzen ditugu gure koloreetarako, sareko eten puntuetarako eta abar. Sass aldagaiek bezala, Sass mapa guztiek !defaultbandera barne hartzen dute eta gainidatzi eta heda daitezke.

Gure Sass mapa batzuk hutsik daudenekin bateratzen dira lehenespenez. Sass mapa jakin bat erraz zabaltzeko egiten da, baina mapa batetik elementuak kentzea apur bat zailagoa izatearen kostua da.

Aldatu mapa

Mapako aldagai guztiak aldagai $theme-colorsautonomo gisa definitzen dira. Gure mapan dagoen kolore bat aldatzeko $theme-colors, gehitu honako hau zure Sass fitxategi pertsonalizatuan:

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

Geroago, aldagai hauek Bootstrap-en $theme-colorsmapan ezartzen dira:

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

Gehitu mapara

Gehitu kolore berriak $theme-colors, edo beste edozein mapari, Sass mapa berri bat sortuz zure balio pertsonalizatuekin eta batuz jatorrizko maparekin. Kasu honetan, $custom-colorsmapa berri bat sortuko dugu eta honekin bateratuko dugu $theme-colors.

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

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

Kendu mapatik

Koloreak $theme-colorsedo beste edozein mapatik kentzeko, erabili map-remove. Kontuan $theme-colorsizan gure eskakizunen artean txertatu behar duzula bere definizioaren ondoren variableseta hemen erabili aurretik 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

Beharrezko giltzak

Bootstrap-ek Sass mapetan gako zehatz batzuen presentzia hartzen du guk geuk erabili eta hedatzen ditugun heinean. Sartutako mapak pertsonalizatzen dituzun heinean, akatsak aurki ditzakezu Sass maparen gako zehatz bat erabiltzen ari direnean.

Adibidez, primary, success, eta dangerteklak $theme-colorserabiltzen ditugu esteketarako, botoietarako eta inprimaki-egoeretarako. Gako hauen balioak ordezkatzeak ez luke arazorik sortu behar, baina kentzeak Sass-en konpilazio arazoak sor ditzake. Kasu hauetan, balio horiek erabiltzen dituen Sass kodea aldatu beharko duzu.

Funtzioak

Koloreak

Dauzkagun Sass mapen ondoan , gaiaren koloreak aldagai autonomo gisa ere erabil daitezke, adibidez $primary.

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

tint-color()Bootstrap-en eta shade-color()funtzioekin koloreak argitu edo ilun ditzakezu . Funtzio hauek kolore beltzak edo zuriak nahastuko dituzte, Sassen jatorrizkoa lighten()eta darken()argitasuna kopuru finko batean aldatuko duten funtzioek ez bezala, eta horrek askotan ez du nahi den efektua ekartzen.

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

Praktikan, funtzioari deituko zenioke eta kolore eta pisuaren parametroak pasatuko zenituzke.

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

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

Kolore kontrastea

Web Content Accessibility Guidelines (WCAG) kontraste-baldintzak betetzeko , egileek 4.5:1eko gutxieneko testu-kolore-kontrastea eta 3:1eko gutxieneko testua ez den kolore-kontrastea eman behar dute , oso salbuespen gutxirekin.

Horretan laguntzeko, color-contrastfuntzioa sartu dugu Bootstrap-en. WCAG kontraste-erlazioaren algoritmoa erabiltzen du kolore -espazio bateko luminantzia erlatiboan oinarritutako kontraste-atalaseak kalkulatzeko , zehaztutako oinarrizko kolorean oinarritutako kontraste-kolore argia ( ), iluna ( ) edo beltza ( ) sRGBautomatikoki itzultzeko . Funtzio hau bereziki erabilgarria da klase anitz sortzen ari zaren mixin edo loopetarako.#fff#212529#000

Adibidez, gure $theme-colorsmapatik kolore-laginak sortzeko:

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

Kontraste bakarreko beharretarako ere erabil daiteke:

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

Gure kolore-maparen funtzioekin oinarrizko kolore bat ere zehaztu dezakezu:

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

Ihes SVG

Funtzioa , eta karaktereetatik escape-svgihes egiteko erabiltzen dugu SVG atzeko planoko irudietarako. Funtzioa erabiltzean , datu-URIak aipatu behar dira.<>#escape-svg

Gehitu eta kendu funtzioak

CSS funtzioa biltzeko addeta funtzioak erabiltzen ditugu . Funtzio hauen helburu nagusia "unitaterik gabeko" balio bat adierazpen batera pasatzen denean erroreak saihestea da. Horrelako esamoldeek errore bat itzuliko dute arakatzaile guztietan, matematikoki zuzenak izan arren.subtractcalc0calccalc(10px - 0)

Kalkuluak balio duen adibidea:

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

Kalkulua baliogabea den adibidea:

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

Mixinak

Gure scss/mixins/direktorioan Bootstrap-en atalak elikatzen dituzten nahasketa ugari ditu eta zure proiektuan ere erabil daitezke.

Kolore-eskemak

Multimedia kontsultarako laburdura nahasketa prefers-color-schemebat eskuragarri dago light, dark, eta kolore-eskema pertsonalizatuetarako laguntzarekin.

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