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.
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á configurar 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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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 // Optional
sección según sea necesario. Sugerimos usar la pila de importación completa de nuestro bootstrap.scss
archivo como punto de partida.
Valores predeterminados variables
Cada variable de Sass en Bootstrap incluye el !default
indicador 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 !default
bandera. 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-color
y color
por 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/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.
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 !default
bandera 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-colors
mapa se definen como variables independientes. Para modificar un color existente en nuestro $theme-colors
mapa, agregue lo siguiente a su archivo Sass personalizado:
$primary: #0074d9;
$danger: #ff4136;
Posteriormente, estas variables se configuran en el $theme-colors
mapa 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-colors
mapa 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 insertarlo entre nuestros requisitos y opciones:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 primary
para success
enlaces , 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 produce el 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 estándares de accesibilidad WCAG 2.0 para el contraste de color , los autores deben proporcionar una relación de contraste de al menos 4,5:1 , con muy pocas excepciones.
Una función adicional que incluimos en Bootstrap es la función de contraste de color, color-contrast
. Utiliza el algoritmo WCAG 2.0 para calcular los umbrales de contraste en función de la luminancia relativa en un sRGB
espacio 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-colors
mapa:
@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-svg
función para escapar de los caracteres <
, >
y #
para las imágenes de fondo SVG. Al usar la escape-svg
función, se deben citar los URI de datos.
Sumar y restar funciones
Usamos las funciones add
y subtract
para envolver la función CSS calc
. 0
El objetivo principal de estas funciones es evitar errores cuando se pasa un valor "sin unidades" a una calc
expresió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-scheme
consulta de medios con soporte para esquemas light
de dark
color 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
}
}