Sass

Utiliza os nosos ficheiros de orixe Sass para aproveitar variables, mapas, mixins e funcións para axudarche a crear máis rápido e personalizar o teu proxecto.

Nesta páxina

Utiliza os nosos ficheiros de orixe Sass para aproveitar variables, mapas, mixins e moito máis.

Estrutura do ficheiro

Sempre que sexa posible, evite modificar os ficheiros principais de Bootstrap. Para Sass, iso significa crear a túa propia folla de estilo que importe Bootstrap para que poidas modificala e ampliala. Asumindo que está a usar un xestor de paquetes como npm, terá unha estrutura de ficheiros así:

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

Se descargaches os nosos ficheiros fonte e non estás usando un xestor de paquetes, quererás crear manualmente algo semellante a esa estrutura, mantendo os ficheiros fonte de Bootstrap separados dos teus.

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

Importando

No teu custom.scss, importarás os ficheiros Sass de orixe de Bootstrap. Tes dúas opcións: incluír todo o Bootstrap ou escoller as pezas que necesites. Recomendamos este último, aínda que teña en conta que hai algúns requisitos e dependencias entre os nosos compoñentes. Tamén terás que incluír algo de JavaScript para os nosos complementos.

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

Con esa configuración, podes comezar a modificar calquera das variables e mapas de Sass no teu custom.scss. Tamén pode comezar a engadir partes de Bootstrap na // Optionalsección segundo sexa necesario. Suxerimos usar a pila de importación completa do noso bootstrap.scssficheiro como punto de partida.

Variables por defecto

Cada variable de Sass en Bootstrap inclúe a !defaultmarca que che permite anular o valor predeterminado da variable no teu propio Sass sen modificar o código fonte de Bootstrap. Copie e pegue as variables segundo sexa necesario, modifique os seus valores e elimine a !defaultmarca. Se xa se asignou unha variable, non se volverá asignar polos valores predeterminados en Bootstrap.

Atoparás a lista completa das variables de Bootstrap en scss/_variables.scss. Algunhas variables están configuradas en null, estas variables non saen a propiedade a menos que se anulen na súa configuración.

As substitucións de variables deben producirse despois de importar as nosas funcións, pero antes do resto das importacións.

Aquí tes un exemplo que cambia o background-colore colorpara o <body>ao importar e compilar Bootstrap mediante npm:

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

Repita se é necesario para calquera variable en Bootstrap, incluídas as opcións globais que aparecen a continuación.

Comeza con Bootstrap a través de npm co noso proxecto de inicio! Diríxete ao repositorio de modelos twbs/bootstrap-npm-starter para ver como crear e personalizar Bootstrap no teu propio proxecto npm. Inclúe o compilador Sass, o prefixo automático, as iconas Stylelint, PurgeCSS e Bootstrap.

Mapas e bucles

Bootstrap inclúe un puñado de mapas Sass, pares de valores clave que facilitan a xeración de familias de CSS relacionados. Usamos mapas Sass para as nosas cores, puntos de ruptura da cuadrícula e moito máis. Do mesmo xeito que as variables de Sass, todos os mapas de Sass inclúen a !defaultbandeira e pódense substituír e ampliar.

Algúns dos nosos mapas de Sass combínanse noutros baleiros por defecto. Isto faise para permitir a expansión sinxela dun mapa de Sass determinado, pero ten o custo de dificultar un pouco a eliminación de elementos dun mapa.

Modificar mapa

Todas as variables do $theme-colorsmapa defínense como variables autónomas. Para modificar unha cor existente no noso $theme-colorsmapa, engade o seguinte ao teu ficheiro Sass personalizado:

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

Máis adiante, estas variables establécense no $theme-colorsmapa de Bootstrap:

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

Engadir ao mapa

Engade novas cores a $theme-colors, ou a calquera outro mapa, creando un novo mapa Sass cos teus valores personalizados e fusionándoo co mapa orixinal. Neste caso, crearemos un novo $custom-colorsmapa e fusionaremos con $theme-colors.

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

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

Eliminar do mapa

Para eliminar cores de $theme-colors, ou de calquera outro mapa, use map-remove. Teña en conta que debe inserir $theme-colorsentre os nosos requisitos xusto despois da súa definición en variablese antes do seu uso en 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

Chaves necesarias

Bootstrap asume a presenza dalgunhas claves específicas dentro dos mapas de Sass tal e como as utilizamos e as ampliamos nós mesmos. A medida que personaliza os mapas incluídos, é posible que se produzan erros nos que se utilice a clave dun mapa Sass específico.

Por exemplo, usamos as teclas primary, success, e de para ligazóns, botóns e estados de formulario. A substitución dos valores destas chaves non debería presentar problemas, pero eliminalas pode causar problemas de compilación de Sass. Nestes casos, terás que modificar o código Sass que fai uso deses valores.danger$theme-colors

Funcións

Cores

Xunto aos mapas Sass que temos, as cores dos temas tamén se poden usar como variables independentes, como $primary.

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

Podes aclarar ou escurecer as cores con Bootstrap tint-color()e shade-color()funcións. Estas funcións mesturarán cores con branco ou negro, a diferenza do nativo de Sass lighten()e darken()as funcións que cambiarán a luminosidade nunha cantidade fixa, o que moitas veces non produce o efecto desexado.

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

Na práctica, chamarías á función e pasarías os parámetros de cor e peso.

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

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

Contraste de cor

Para cumprir os requisitos de contraste das directrices de accesibilidade ao contido web (WCAG) , os autores deben proporcionar un contraste de cor de texto mínimo de 4,5:1 e un contraste de cor non de texto mínimo de 3:1 , con moi poucas excepcións.

Para axudar con isto, incluímos a color-contrastfunción en Bootstrap. Usa o algoritmo de relación de contraste WCAG para calcular os limiares de contraste baseados na luminancia relativa nun sRGBespazo de cor para devolver automaticamente unha cor de contraste clara ( #fff), escura ( #212529) ou negra ( #000) en función da cor base especificada. Esta función é especialmente útil para mixins ou loops nos que está a xerar varias clases.

Por exemplo, para xerar mostras de cores a partir do noso $theme-colorsmapa:

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

Tamén se pode usar para necesidades de contraste puntuais:

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

Tamén podes especificar unha cor base coas nosas funcións de mapa de cores:

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

Escape SVG

Usamos a escape-svgfunción para escapar dos caracteres <, >e #para as imaxes de fondo SVG. Cando se utiliza a escape-svgfunción, os URI de datos deben ser citados.

Funcións de suma e resta

Usamos as funcións adde subtractpara envolver a calcfunción CSS. O propósito principal destas funcións é evitar erros cando 0se pasa un valor "sen unidade" a unha calcexpresión. Expresións como calc(10px - 0)devolverán un erro en todos os navegadores, a pesar de ser matemáticamente correctas.

Exemplo onde o cálculo é válido:

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

Exemplo onde o cálculo non é válido:

$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

O noso scss/mixins/directorio ten unha tonelada de mesturas que alimentan partes de Bootstrap e tamén se poden usar no teu propio proxecto.

Esquemas de cores

Hai unha mestura de abreviaturas para a prefers-color-schemeconsulta de medios con soporte para esquemas de cores personalizados light, , e.dark

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