Блог

Как задать имя динамического класса scss, используя значения полей. Это то, что я пробовал

 $spaceamounts: (1, 3, 5, 8, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 110, 120, 130, 140,150,160,170,180,);  
$sides: (top, bottom, left, right);  

@each $space in $spaceamounts {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }
    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
} 
  

Поэтому я могу использовать имя класса полей / отступов, например pt-1, mt-10

Но я хочу установить значение $ spaceamounts как 1 ~ 999.

Кто-нибудь знает, как исправить код?

Если вы хотите создать класс для каждого значения от 1 до 999, вы можете избавиться от $spaceamounts него и использовать @for цикл:

 $sides: (top, bottom, left, right);  

@for $i from 1 through 999 {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$i} {
      margin-#{$side}: #{$i}px !important;
    }
    .p#{str-slice($side, 0, 1)}-#{$i} {
      padding-#{$side}: #{$i}px !important;
    }
  }
} 
  

Как бы то ни было, я думаю, что это не то, что вам следует делать, поскольку это приведет к генерации огромного количества кода.