Correa de Botas de Temática

Bootstrap 4 musuq ruwasqa Sass tikraqniykuwan ruway tukuy pacha estilo munasqakunarayku mana sasa temakuna chaymanta componente tikraykunapaq.

Qallariy

Bootstrap 3 kaqpi, temakuna aswanta LESS kaqpi, sapanchasqa CSS kaqpi, chaymanta huk sapaq tema estilo raphipi tikraq llallichiykunawan purichisqa karqa mayqinkunatachus distwillañiqiykupi churarqayku. Wakin kallpachakuywan, huk tukuyninpi musuqmanta ruwayta atinman Bootstrap 3 kaqpa rikchayninta mana llamispa uma willañiqikunata. Bootstrap 4 huk riqsisqa, ichaqa pisi hukniray ruwayta qun.

Kunanqa, tema ruwayqa Sass variables kaqwan, Sass mapakunawan, chaymanta CSS ruwasqawan hunt'akun. Mana aswan dedicado tema estilo raphi kanchu; aswanpas, ruwasqa temata atichiyta atikunki gradientekuna, llantukuna chaymanta aswan yapanapaq.

Sass

Sass pukyuta willañiqiykuta llamk'achiy tikraqkuna, mapakuna, mixins chaymanta aswan ventajata hapinapaq mayk'aq Sass kikin kaqniyki pipeline kaqwan huñuchkanki.

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/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

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.

Variablekuna llalliykuna hamunan tiyan ruwanakunayku, variablekuna, chaymanta mixinkuna hawamanta apamusqa kaptin, ichaqa manaraq puchuq apamusqakuna.

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

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

Mapas y bucles

Bootstrap 4 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

Mapaykupi huk kachkaq llimp'ita tikranaykipaq $theme-colors, kayta yapay sapanchasqa Sass willañiqiykiman:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Mapaman yapay

Musuq llimp'ita $theme-colorsyapanaykipaqqa, musuq llaveta chanta chanita yapay:

$theme-colors: (
  "custom-color": #900
);

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";
...

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

Bootstrap achka Sass ruwanakunata llamk'achin, ichaqa huk huch'uy huñulla general tematico kaqpaq ruwanapaq kanku. Kimsa ruwanakunata churarqayku llimp'i mapakunamanta chanikunata jap'inapaq:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Kaykunaqa huk Sass mapamanta huk llimp'ita akllayta atikunki imaynachus huk llimp'i tikraq v3 kaqmanta llamk'achinki hina.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Hinallataqmi huk ruwanayuq kayku mapamanta huk nivel particular colorta chaskinapaq $theme-colors. Mana allin pata chanikunaqa llimp'ita k'anchanqa, aswan hatun patakunataq yanayachinqa.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Ruwaypi, ruwayta waqyanki chaymanta iskay parámetros kaqpi pasanki: sutimanta llimp'imanta $theme-colors(kayhina, primaria utaq peligro) chaymanta huk yupay nivel kaqmanta.

.custom-element {
  color: theme-color-level(primary, -10);
}

Yapa ruwanakuna hamuq pachapi yapasqa kanman utaq kikiyki sapanchasqa Sass ruwanapaq nivel ruwanakuna yapasqa Sass mapakunapaq, utaq huk genérico kaqpas sichus aswan verbose kayta munarqanki.

Contraste de colores nisqa

Huk yapasqa ruwana Bootstrap kaqpi churasqaykuqa llimp'i chiqanchay ruwaymi, color-yiq. YIQ llimp'i espaciota llamk'achin kikinmanta kutichinanpaq huk k'anchay ( #fff) utaq yana ( #111) contraste llimp'ita chaymanta nisqa base llimp'i 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-yiq($value);
  }
}

Huk kutilla contraste necesidadkunapaqpas llamk'achiy atikunmi:

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

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

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

SVG nisqamanta ayqikuy

Ruwayta llamk'achiyku , chaymanta SVG qhipa siq'ikunapaq qillqakuna escape-svgayqinapaq . Kay qillqakuna ayqina tiyan IE kaqpi qhipa siq'ikunata allinta ruwanapaq. 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);
}

Sass akllaykuna

Bootstrap 4 ruwasqayku ruwasqa sapanchasqa tikraqkuna willakuyniykuwan ruway chaymanta musuq $enable-*Sass tikraqkunawan tukuypaq CSS munasqakunata mana sasachu tikray. Huk tikraqpa chaninninta llalliy hinaspa npm run testnecesitasqanman hina musuqmanta huñuy.

Kay tikraqkunata tariyta chaymanta ruwayta atikunki llave global akllanakuna Bootstrap scss/_variables.scsswillañiqipi.

Llinpi

Achka Bootstrap imaymana componentekuna chaymanta yanapakuyninkuna huk Sass mapapi riqsichisqa llimp'ikuna qatiqninwan ruwasqa. Kay mapaqa Sass nisqapi llimp'isqa kanman, huk kamachiy huñukunata utqaylla paqarichinanpaq.

Tukuy llimpikuna

Llapan llimp'ikuna Bootstrap 4 kaqpi tarikuq, Sass tikraq hina chaymanta huk Sass mapa scss/_variables.scsswillañiqipi tarikun. Kayqa qatiq uchuy lluqsichiykunapi mast'arisqa kanqa yapa llimp'ikuna yapanapaq, anchata hina gris escala paleta yaykusqayku hina.

Kaypi imaynatachus kaykunata Sass nisqaykipi llamk'achiyta atinki:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Color utilidad clasekunapas kanmi churanapaq colorchaymanta background-color.

Tema colores

Llapa llimp'ikunamanta huk huch'uy huñuta llamk'achiyku huk aswan huch'uy llimp'ikuna ruwanapaq llimp'ikuna ruwanapaq, chaymanta Sass tikraq hina chaymanta huk Sass mapa Bootstrap scss/_variables.scsswillañiqipi tarikun.

Grises

Un expansivo conjunto de variables grises y un mapa Sass en scss/_variables.scsspara tonos consistentes de gris a través de tu proyecto. Reparay kaykunaqa “q’uñi griskuna” kasqankuta, chaykunaqa huk sutil azul tonoman tendenciayuq kanku, manataq grises neutrales kaqkunamanchu.

, ukhupi scss/_variables.scss, Bootstrap llimp'i tikraqkunata chaymanta Sass mapata tarinki. Kaypi huk rikch'ana $colorsSass mapamanta:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Mapa ukhupi chanikunata yapay, hurquy utaq tikray imayna huk achka componentekunapi llamk'achisqa kasqankuta musuqyachinaykipaq. Llakikuypaq kay pacha, mana sapa componente kay Sass mapata llamk'achin. Hamuq musuqyachiykuna kayta allinchaypaq kallpachakunqa. Chaykamaqa, planificay ${color}variables nisqakunata, kay mapa Sass nisqakunatapas llamk’achinapaq.

Componentes nisqakuna

Askha Bootstrap kaqpa componentesnin chaymanta yanapakuyninkuna ruwasqa kanku @eachllañukunawan chaymanta huk Sass mapa kaqpi iteranku. Kayqa aswanta yanapakun huk componentemanta $theme-colorsvariantes ruwanapaq ñuqaykuwan chaymanta sapa ruphaypaq kutichiq variantes ruwanapaq. Imaynatachus kay Sass mapakuna ruwanki chaymanta wakmanta huñunki, kikillanmanta rikunki tikrayniyki kay llimp'ikunapi rikuchisqa.

Modificadores nisqakuna

Bootstrap kaqpa achka componentenkuna huk base-modifier clase ruwaywan ruwasqa kanku. Kayqa niyta munan, aswan hatun estilo huk base clase kaqpi hap'isqa kachkan (kayhina, .btn) estilo variaciones kaqtaq huk clasekuna modificador kaqpi (kayhina, .btn-danger). Kay tikraq clasekuna $theme-colorsmapamanta ruwasqa kanku ruwanapaq sapanchasqa yupayta chaymanta sutita tikraq claseykumanta.

Kaypi iskay rikch'anakuna imayna $theme-colorsmapa patapi llimp'iyku .alertcomponente kaqman chaymanta llapa .bg-*qhipa yanapakuyniykuman tikraqkunata ruwanapaq.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Kutichiq

Kay Sass llimp'ikuna mana llimp'i mapakunallapichu, nitaq. Chantapas componentekunaykimanta utaq yanapakuyniykimanta kutichiq variaciones ruwayta atikunki. Ejemplopaq hap'iy kutichiq qillqa chiqanchay yanapakuyniyku maypi huk @eachllimp'ita $grid-breakpointsSass mapapaq huk willay mast'ariy tapuywan chaqruyku.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Sichus qam hukchayta necesitanki $grid-breakpoints, tikrayniyki llapa llimp'ikuna chay mapa hawapi kuti-kutiriq kaqman ruwakunqa.

CSS nisqa tikraqkuna

Bootstrap 4 yaqa iskay chunka CSS sapanchasqa propiedades (variables) huñusqa CSS kaqninpi churan. Kaykunaqa sapa kuti llamk'achisqa chanikunaman mana sasa yaykuyta qunku imaynachus tema llimp'iyku, pakikunayku chaymanta primaria letra pilakuna llamk'achkanki maskaqniykipa Inspector kaqpi, huk código rit'i caja kaqpi utaq general prototipo kaqpi.

Kaqlla kaq variables nisqakuna

Kaypi kachkan variables nisqakuna churasqayku (reparay chay :rootes requerido). Chaykunaqa _root.scssarchivoykupin tarikunku.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Ejemplos

CSS tikraqkuna Sass tikraqkunaman rikch'aq flexibilidadta qun, ichaqa mana huñusqa necesidadniyuq manaraq maskaqman sirwisqa kachkaptin. Ejemplopaq, kaypi p'anqaykupa letranta chaymanta t'inki estilokunata CSS tikraqkunawan musuqmanta churachkayku.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Variables de punto de ruptura

Qallariypi CSS tikraqniykupi p'akiykunata churarqayku chaypas (kayhina, --breakpoint-md), kaykunaqa mana willay mast'ariy tapuykunapi yanapasqachu , ichaqa willay huñukuna ukhupi willay mast'ariy tapuykunapi llamk'achiy atikunkuraq. Kay p'akiy tikraqkuna huñusqa CSS kaqpi qhipakunku tupachiypaq qusqa JavaScript kaqwan llamk'achiy atikunku. Astawan yachay spec nisqapi .

Kaypi huk rikch'ana kachkan imakuna mana yanapasqachu:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Hinaspa kaypi huk ejemplo imakuna yanapasqa kasqanmanta:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}