Recorriendo los puntos de interrupción a través de SCSS
Actualmente tengo lo siguiente, pero sería genial poder recorrer fácilmente los puntos de interrupción si es posible.
@for $i from 1 through 200 {
.m-#{$i}px {
margin: 1px * $i !important;
}
&-sm {
@include media-breakpoint-up(sm) {
margin: 1px * $i !important;
}
}
&-md {
@include media-breakpoint-up(md) {
margin: 1px * $i !important;
}
}
&-lg {
@include media-breakpoint-up(lg) {
margin: 1px * $i !important;
}
}
&-xl {
@include media-breakpoint-up(xl) {
margin: 1px * $i !important;
}
}
&-xxl {
@include media-breakpoint-up(xxl) {
margin: 1px * $i !important;
}
}
}
Hay más de este código para cubrir:
– mt
– mx
– my
– mr
– ml
Además, tengo algo similar configurado para el padding y algunos otros elementos, sería genial reducir el código ya que está tomando bastante tiempo generar el código.
Cualquier ayuda sería genial.
davy.ai
Solución para iterar a través de puntos de ruptura en CSS/SASS
Para iterar fácilmente a través de puntos de ruptura en CSS/SASS, puedes definir un array de puntos de ruptura y luego utilizar un bucle para generar las clases.
Aquí tienes un ejemplo de código para generar clases de margen para varios puntos de ruptura:
En el código anterior, definimos un array de puntos de ruptura y una función para iterar a través de ellos y generar las clases. La función
generate-margin-classes
recibe dos argumentos: la propiedad CSS (en este caso, margen) y el valor de la unidad (en este caso, 1px).Luego utilizamos un bucle para generar clases de margen para varios tamaños (de 1px a 200px en este caso) y llamamos a la función
generate-margin-classes
para generar las clases para cada punto de ruptura.De esta manera, podemos reducir la cantidad de código y iterar fácilmente a través de los puntos de ruptura. Puedes utilizar una lógica similar para otras propiedades CSS como padding, margin-top/bottom, margin-left/right, etc.