es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Recorriendo los puntos de interrupción a través de SCSS

26 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    // Define un array de puntos de ruptura
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// Define una función para iterar a través de los puntos de ruptura y generar las clases
@function generate-margin-classes($property, $units) {
  $classes: ();

  @each $breakpoint, $size in $breakpoints {
    $class-name: ".#{$property}-#{str-replace($breakpoint, '-', '_')}";

    @if $breakpoint == 'sm' {
      $classes: append($classes, "#{$class-name} { #{$property}: #{$units} }");
    } @else {
      $classes: append($classes, "@include media-breakpoint-up(#{$breakpoint}) { #{$class-name} { #{$property}: #{$size} * #{$units} } }");
    }
  }

  @return join($classes, "\n");
}

// Genera clases de margen para varios tamaños usando la función
@for $i from 1 through 200 {
  .m-#{$i}px {
    margin: $i * 1px !important;

    #{generate-margin-classes('margin', $i)}
  }
}

    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.

Comments are closed.