in English

Sass

Sass pukyuta willañiqiykuta llamk'achiy variables, mapas, mixins chaymanta ruwanakuna aprovechanaykipaq yanapasunaykipaq aswan utqaylla ruwayta chaymanta proyectoykita ruwanapaq.

Kay p'anqapi

Sass pukyuta willañiqiykuta llamk'achiy variables, mapas, mixins, chaymanta aswan aprovechanaykipaq.

Willañiqip rurasqan

Atikuqtinqa, Bootstrappa uma willañiqikunata ama tikraychu. Sass kaqpaq, chay niyta munan ruwayta kikin estilo raphiyki chaymanta Bootstrap apamun chaymanta chayta tikrayta chaymanta mast'ariyta atikunki. npm hina huk paquete kamachiqta llamk'achkanki nispa yupaspa, huk willañiqi estructurayuq kanki kayhina rikch'akuq:

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

Sichus pukyuta willañiqiykuta uraykachirqanki chaymanta mana huk paquete kamachiqta llamk'achkankichu, makiwan chay ruwanaman rikch'akuq ruwayta munanki, Bootstrap pukyuta willañiqikunata sapallaykimanta sapaq waqaychaspa.

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

Importando

Qampa kaqpi custom.scss, Bootstrap kaqpa pukyuta Sass willañiqikunata apamunki. Iskay akllanakunayuq kanki: llapa Bootstrap kaqmanta churay, utaq necesitasqayki partekunata akllay. Kay qhipa kaqta kallpachayku, ichaqa yachay wakin requisitos chaymanta dependenciakuna kanku tukuy componentesniykupi. Hinallataq wakin JavaScript pluginsniykupaq churanayki tiyan.

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

Chay churaywan, mayqin Sass tikraqkuna chaymanta mapakunaykipi tikrayta qallariyta atikunki custom.scss. Hinallataq qallariyta atikunki yapayta Bootstrap kaqmanta wakinkuna // Optionalt'aqa ukhupi necesitasqanmanhina. Willañiqiykumanta hunt'asqa apamuy pilata bootstrap.scssqallariyniyki hina llamk'achiyta yuyaychayku.

Variable nisqa ñawpaqmanta churasqakuna

Sapa Sass tikraq Bootstrap kaqpi !defaultbanderayuq kachkan chaymanta tikraqpa ñawpaqmanta chanita kikiyki Sass kaqpi mana Bootstrap pukyuta tikraspa llallichiyta atikun. Munasqaykimanhina tikraqkunata qillqaspa k'askachiy, chanikunata tikray, !defaultbanderatapas hurquy. Sichus huk tikraq churasqaña kachkan, chaymanta mana musuqmanta qusqachu kanqa Bootstrap kaqpi ñawpaqmanta chanikunawan.

Bootstrap kaqpa tikraqninkunap hunt'asqa listanta tarinki kaypi scss/_variables.scss. Wakin tikraqkuna , nisqaman churasqa kanku null, kay tikraqkuna mana propiedadta lluqsichinchu mana wakichiyniykipi llallichisqa kaptin.

Variable overrides ruwanakunayku hawamanta apamusqa kaptin hamunan tiyan, ichaqa manaraq wakin apamusqakuna kachkaptin.

Kaypi huk rikch'ana kachkan chaymanta chaymanta chaypaq tikran background-colorchaymanta colorBootstrap <body>npm kaqnintakama apamuspa chaymanta huñuypi:

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

Bootstrap kaqpi mayqin tikraqpaqpas necesario hina yapay, uraypi tukuypaq akllanakuna kaqwan.

¡Empezar con Bootstrap vía npm con nuestro proyecto de arranque! Uma kay twbs/bootstrap-npm-starter plantilla waqaychanaman qhawanaykipaq imayna ruwayta chaymanta ruwayta Bootstrap kikin npm proyectoykipi. Sass huñuq, Autoprefixer, Stylelint, PurgeCSS chaymanta Bootstrap Iconos kaqwan.

Mapas y bucles

Bootstrap huk makilla Sass mapakunayuq, llave chanin pariskuna ruwan chaymanta aswan facil ayllukuna tupaq CSS kaqmanta ruwayta ruwan. Sass mapakunata llamk'achiyku llimp'iykupaq, rejilla p'akiyniykupaq, chaymanta aswan. Sass tikraqkuna hina, llapa Sass mapakuna !defaultbanderayuq kanku chaymanta llallichisqa chaymanta mast'arisqa kanman.

Wakin Sass mapaykuqa ch'usaqkunaman hukllachasqa kachkan ñawpaqmanta. Kayqa ruwakun huk qusqa Sass mapamanta mana sasa mast'ariyta saqinanpaq, ichaqa hamun huk mapamanta imakuna hurquyta aswan sasata ruwanapaq qullqiwan.

Mapata tikray

Mapapi llapallan variables $theme-colorsnisqakunam sapallan variables nisqa hina riqsichisqa kachkan. Mapaykupi huk kachkaq llimp'ita tikranaykipaq $theme-colors, kayta yapay sapanchasqa Sass willañiqiykiman:

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

Qhipaman, kay tikraqkuna Bootstrap $theme-colorsmapapi churasqa kanku:

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

Mapaman yapay

Musuq llimp'ikunata yapay $theme-colors, utaq mayqin wak mapamanpas, musuq Sass mapata ruwaspa sapanchasqa chaniykikunawan chaymanta ñawpaq mapawan hukllachaspa. $custom-colorsKayhina kaqtinqa, musuq mapata ruwasaqku, chaymantataq $theme-colors.

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

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

Mapamanta hurquy

$theme-colors, utaq mayqin mapamantapas llimp'ikunata hurqunaykipaqqa , llamk'achiy map-remove. Yachay chayta churanayki tiyan mañakuyniyku chaymanta akllanayku chawpipi:

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

Llaves requeridas

Bootstrap wakin llavekuna específicas kaqpa kayninta Sass mapakuna ukhupi hapin imaynachus ñuqayku llamk'achisqayku chaymanta kaykunata mast'arisqayku. Imaynachus yapasqa mapakuna ruwanki, pantasqakunawan tinkiyta atikunki maypi huk Sass mapapa llaven llamk'achkan.

Ejemplopaq, primary, success, chaymanta dangerllaves kaqmanta $theme-colorsllamk'achiyku t'inkikuna, botones chaymanta formulario estadokuna kaqpaq. Kay llavekuna chanikunata tikrayqa mana ima sasachakuykunata rikuchinanchu tiyan, ichaqa chayta hurquyqa Sass huñusqa sasachakuykunata ruwanman. Kay instanciakunapi, Sass codigota tikranayki tiyan mayqinchus chay chanikunata llamk'achin.

Ruwaykuna

Colores

Sass mapakuna kapuwasqanchikpa ladunpi , tema llimp'ikunata sapalla tikraq hinapas llamk'achiy atikunmi, ahinataq $primary.

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

tint-color()Bootstrap's kaqwan chaymanta shade-color()ruwanakunawan llimp'ikunata k'anchayta utaq yanayachiyta atikunki. Kay ruwanakuna llimp'ikunata yana utaq yuraqwan chaqrunqaku, mana Sass' nativo hinachu lighten()chaymanta darken()ruwanakuna mayqinkunachus llamp'u kayta huk takyasqa qullqiwan tikranqa, mayqinchus sapa kuti mana munasqa ruwayman pusakunchu.

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

En la práctica, llamar a la función y pasaría en los parámetros de color y peso.

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

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

Contraste de colores nisqa

WCAG 2.0 haykuy kamachiykunata llimp'i chiqanchaypaq hunt'anapaq , qillqaqkuna huk chiqanchay ratio 4.5:1 kaqllamanta qunanku tiyan , ancha pisi excepciones kaqwan.

Huk yapasqa ruwana Bootstrap kaqpi churasqaykuqa llimp'i chiqanchay ruwaymi, color-contrast. Chayqa WCAG 2.0 algoritmota llamk'achin umbrales de contraste yupanapaq huk colorespacio kaqpi relativa luminancia kaqpi sRGB, kikinmanta kutichinanpaq huk k'anchay ( #fff), yana ( #212529) utaq yana ( #000) contraste colorta chaymanta chay nisqa base color kaqpi. Kay ruwana aswan allin mixins utaq loops kaqpaq maypi achka clasekuna paqarichichkanki.

Ejemplopaq, mapaykumanta color muestrakuna ruwanapaq $theme-colors:

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

Huk kutilla contraste necesidadkunapaqpas llamk'achiy atikunmi:

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

Huk sapsi llimp'itapas llimp'i mapa ruwanaykuwan niyta atinki:

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

SVG nisqamanta ayqikuy

Ruwayta llamk'achiyku , chaymanta SVG qhipa siq'ikunapaq qillqakuna escape-svgayqinapaq . Ruwayta llamk'achkaspa , willay URIkuna citasqa kanan tiyan.<>#escape-svg

Yanapay hinaspa qichuy ruwaykuna

CSS ruwayta p'istunapaq chaymanta addruwanakunata llamk'achiyku . Kay ruwanakunap ñawpaq munayninqa mana pantaykunata ruwanapaqmi, huk “mana unidadniyuq” chanita huk rimayman pasaptin. Imayna rimaykuna llapa maskaqkunapi pantayta kutichinqa, yupaypi chiqan kaptinpas.subtractcalc0calccalc(10px - 0)

Ejemplo maypichus calc allin kasqanmanta:

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

Ejemplo maypichus calc mana allinchu:

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

Mixinkuna

Nuestro scss/mixins/directorio tiene una tonelada de mixins que alimentan partes de Bootstrap y también pueden ser utilizados a través de tu propio proyecto.

Esquemas de colores

Huk taquigrafía mixin prefers-color-schemewillay mast'ariq tapuypaq light, dark, chaymanta sapanchasqa llimp'i esquemakuna yanapakuywan kachkan.

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