Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Hablar con descaro a

Utilice nuestros archivos Sass de origen para aprovechar variables, mapas, combinaciones y funciones para ayudarlo a construir más rápido y personalizar su proyecto.

En esta página

Utilice nuestros archivos Sass de origen para aprovechar variables, mapas, combinaciones y más.

Estructura de archivos

Siempre que sea posible, evite modificar los archivos principales de Bootstrap. Para Sass, eso significa crear su propia hoja de estilo que importe Bootstrap para que pueda modificarla y ampliarla. Suponiendo que está utilizando un administrador de paquetes como npm, tendrá una estructura de archivos que se ve así:

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

Si descargó nuestros archivos fuente y no está utilizando un administrador de paquetes, querrá crear manualmente algo similar a esa estructura, manteniendo los archivos fuente de Bootstrap separados de los suyos.

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

Importador

En su custom.scss, importará los archivos Sass de origen de Bootstrap. Tiene dos opciones: incluir todo Bootstrap o elegir las partes que necesita. Recomendamos lo último, aunque tenga en cuenta que existen algunos requisitos y dependencias entre nuestros componentes. También deberá incluir algo de JavaScript para nuestros 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 en su lugar, puede comenzar a modificar cualquiera de las variables y mapas de Sass en su archivo custom.scss. También puede comenzar a agregar partes de Bootstrap en la // Optionalsección según sea necesario. Sugerimos usar la pila de importación completa de nuestro bootstrap.scssarchivo como punto de partida.

Valores predeterminados variables

Cada variable de Sass en Bootstrap incluye el !defaultindicador que le permite anular el valor predeterminado de la variable en su propio Sass sin modificar el código fuente de Bootstrap. Copie y pegue las variables según sea necesario, modifique sus valores y elimine la !defaultbandera. Si ya se asignó una variable, no se reasignará con los valores predeterminados en Bootstrap.

Encontrará la lista completa de variables de Bootstrap en scss/_variables.scss. Algunas variables se establecen en null, estas variables no generan la propiedad a menos que se anulen en su configuración.

Las anulaciones de variables deben realizarse después de importar nuestras funciones, pero antes del resto de las importaciones.

Aquí hay un ejemplo que cambia el background-colory colorpor el <body>al importar y compilar Bootstrap a través de 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 según sea necesario para cualquier variable en Bootstrap, incluidas las opciones globales a continuación.

¡Comience con Bootstrap a través de npm con nuestro proyecto inicial! Diríjase al repositorio de plantillas twbs/bootstrap-npm-starter para ver cómo crear y personalizar Bootstrap en su propio proyecto npm. Incluye el compilador Sass, Autoprefixer, Stylelint, PurgeCSS y Bootstrap Icons.

Mapas y bucles

Bootstrap incluye un puñado de mapas Sass, pares de valores clave que facilitan la generación de familias de CSS relacionadas. Usamos mapas Sass para nuestros colores, puntos de interrupción de cuadrícula y más. Al igual que las variables de Sass, todos los mapas de Sass incluyen la !defaultbandera y se pueden anular y ampliar.

Algunos de nuestros mapas Sass se fusionan en mapas vacíos de forma predeterminada. Esto se hace para permitir una fácil expansión de un mapa Sass determinado, pero tiene el costo de hacer que la eliminación de elementos de un mapa sea un poco más difícil.

Modificar mapa

Todas las variables del $theme-colorsmapa se definen como variables independientes. Para modificar un color existente en nuestro $theme-colorsmapa, agregue lo siguiente a su archivo Sass personalizado:

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

Posteriormente, estas variables se configuran en el $theme-colorsmapa de Bootstrap:

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

Añadir al mapa

Agregue nuevos colores a $theme-colors, o a cualquier otro mapa, creando un nuevo mapa Sass con sus valores personalizados y combinándolo con el mapa original. En este caso, crearemos un nuevo $custom-colorsmapa y lo fusionaremos con $theme-colors.

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

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

Quitar del mapa

Para eliminar colores de $theme-colors, o de cualquier otro mapa, use map-remove. Tenga en cuenta que debe insertar $theme-colorsentre nuestros requisitos justo después de su definición variablesy antes de su 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

Claves requeridas

Bootstrap asume la presencia de algunas claves específicas dentro de los mapas de Sass tal como las usamos y las ampliamos nosotros mismos. A medida que personaliza los mapas incluidos, es posible que encuentre errores cuando se utiliza la clave de un mapa Sass específico.

Por ejemplo, usamos las teclas , y de primarypara successenlaces , botones y estados de formulario. Reemplazar los valores de estas claves no debería presentar problemas, pero eliminarlas puede causar problemas de compilación de Sass. En estos casos, deberá modificar el código Sass que utiliza esos valores.danger$theme-colors

Funciones

Colores

Además de los mapas de Sass que tenemos, los colores del tema también se pueden usar como variables independientes, como $primary.

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

Puede aclarar u oscurecer los colores con Bootstrap tint-color()y shade-color()funciones. Estas funciones mezclarán colores con negro o blanco, a diferencia de las funciones nativas de Sass, lighten()que darken()cambiarán la luminosidad en una cantidad fija, lo que a menudo no conduce al efecto deseado.

// 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 a la función y pasaría los parámetros de color y peso.

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

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

Contraste de color

Para cumplir con los requisitos de contraste de las Pautas de accesibilidad al contenido web (WCAG) , los autores deben proporcionar un contraste de color de texto mínimo de 4,5:1 y un contraste de color sin texto mínimo de 3:1 , con muy pocas excepciones.

Para ayudar con esto, incluimos la color-contrastfunción en Bootstrap. Utiliza el algoritmo de relación de contraste WCAG para calcular los umbrales de contraste en función de la luminancia relativa en un sRGBespacio de color para devolver automáticamente un color de contraste claro ( #fff), oscuro ( #212529) o negro ( #000) en función del color base especificado. Esta función es especialmente útil para mixins o bucles en los que genera varias clases.

Por ejemplo, para generar muestras de color a partir de nuestro $theme-colorsmapa:

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

También se puede utilizar para necesidades puntuales de contraste:

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

También puede especificar un color base con nuestras funciones de mapa de colores:

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

Escapar SVG

Usamos la escape-svgfunción para escapar de los caracteres <, >y #para las imágenes de fondo SVG. Al usar la escape-svgfunción, se deben citar los URI de datos.

Sumar y restar funciones

Usamos las funciones addy subtractpara envolver la función CSS calc. 0El objetivo principal de estas funciones es evitar errores cuando se pasa un valor "sin unidades" a una calcexpresión. Expresiones como calc(10px - 0)devolverán un error en todos los navegadores, a pesar de ser matemáticamente correctas.

Ejemplo donde el cálculo es 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);
}

Ejemplo donde el cálculo no es 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);
}

mezclas

Nuestro scss/mixins/directorio tiene una tonelada de mixins que potencian partes de Bootstrap y también se pueden usar en su propio proyecto.

Esquemas de color

Se encuentra disponible una combinación abreviada para la prefers-color-schemeconsulta de medios con soporte para esquemas lightde darkcolor personalizados y .

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