twitter bootstrap - ¿Cómo crear nuevos puntos de interrupción en bootstrap 4 usando CDN?
twitter-bootstrap sass (3)
¡Estoy muy sorprendido de que no haya ningún desarrollador capaz de responder mi pregunta! ¡Incluso en el githab nadie se atrevió a pensarlo!
De hecho, ¡todo resultó ser muy simple!
Sí, usando el CDN obtenemos el archivo
css
compilado.
Los estilos en el bootstrap se escriben usando sass.
Además, los estilos son separación escrita y modular.
Por lo tanto, significa que no necesito cargar todo el bootstrap en mi servidor.
Quiero entregar una versión en caché del CSS compilado de Bootstrap y solo necesito agregar mis puntos de interrupción.
Afortunadamente, hay un archivo de arranque específico que es responsable de la cuadrícula.
Es
bootstrap-grid.scss
:
/*!
* Bootstrap Grid v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@at-root {
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
Ahora solo necesito agregar secuencialmente el código de los archivos de arriba agregando mis puntos de interrupción. Agregar código no Grid no es necesario. Por ejemplo, el código responsable del color. Aquí está mi mcve en codepen .
Yo uso BootstrapCDN. Otros estilos escritos en sass y construidos por gulp. Necesito crear mis propios breakpionts. ¿Es posible hacerlos si uso CDN? No puedo entender cómo hacerlo. Tengo que crear estos puntos de interrupción:
--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;
Quiero obtener algo como esto:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
<div style="height:100vh;background:purple">text</div>
</div><!--col-->
</div><!--.row-->
</div><!--.container-->
Encontré el manual y estoy intentando esto:
$grid-breakpoints: (
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
) !default;
$container-max-widths: (
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
) !default;
:root {
--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;
}
Pero no produce resultados y genera errores:
Anidamiento ilegal: nada puede anidarse debajo de declaraciones variables.
¿Qué estoy haciendo mal?
Gracias de antemano por su ayuda.
UPD: si eso no es posible ... ¿Hay alguna alternativa? ¿Puedo editar fácilmente mi código para simular la cuadrícula de arranque con mis puntos de interrupción?
UPD2: arreglé los errores gracias a @aer0 :
$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default
$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default
/:root
--breakpoint-xxxs: 0
--breakpoint-xxs: 320px
--breakpoint-xs: 568px
--breakpoint-sm: 667px
--breakpoint-md: 768px
--breakpoint-lg: 992px
--breakpoint-xl: 1200px
--breakpoint-xxl: 1440px
--breakpoint-xxxl: 1600px
Pero no resuelve mi problema.
No se puede hacer completamente desde CDN.
Para personalizar / anular
correctamente
utilizando SASS, debe importar los archivos necesarios de Bootstrap scss en su
custom.scss
.
Para anular los puntos de corte de la cuadrícula, como mínimo necesita
functions
y
variables
.
Luego configure las variables según sea necesario, y finalmente @import bootstrap.
¡Observe cómo predeterminado!
se ha eliminado como se
explica en los documentos
como el método de personalización correcto.
/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* set the overriding variables */
$grid-breakpoints: (
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
);
$container-max-widths: (
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
);
/* override the !default vars with the values we set above */
@import "bootstrap";
Con este método, hemos agregado los nuevos puntos de interrupción de la cuadrícula y nos hemos asegurado de que estos nuevos puntos de interrupción funcionen en todas partes en Bootstrap, incluida la cuadrícula, las utilidades receptivas para el espaciado, la visualización, la caja flexible, la alineación, el posicionamiento , etc.
https://www.codeply.com/go/BIgmm1XGc2
Ver también:
Cómo extender / modificar (personalizar) Bootstrap 4 con SASS
Twitter Bootstrap: agregue consultas de medios para el punto de interrupción xxs
Según Github, parece que te estás encontrando con un ''error'' aquí. Ver aquí: https://github.com/sass/sass/issues/1166
Dicho esto, tendría que escribir su definición de variable en una sola línea así como así.
$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px) !default