scss动态设置属性

187 阅读1分钟
$spacing-property-map: (
    m:  margin,
    mt: margin-top,
    mr: margin-right,
    ml: margin-left,
    mb: margin-bottom,
    p:  padding,
    pt: padding-top,
    pb: padding-bottom,
    pl: padding-left,
    pr: padding-right,
    in: text-indent,
);

@each $keyword, $property in $spacing-property-map {
  .#{$keyword}-0 { #{$property}: 0 !important; }

  @for $size from 1 through 10 {
    $val: $size * 5;
    .#{$keyword}-#{$val} { #{$property}: $val * 1px !important; }
  }
}


  @for $height from 1 through 10 {
    $val: $height * 5;
    .strict-height-#{$val} {
       height: $val * 1px !important; 
       line-height: $val * 1px !important; 
      }
  }