twitter bootstrap - ¿Cómo crear nuevos puntos de interrupción en bootstrap 4 usando CDN?

twitter-bootstrap sass

Question

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.

Codepen mcve .

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

Answer 1

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

Answer 2

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

Answer 3

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