想知道是否有任何方法可以简化此SASS代码

Question

我用波旁威士忌整洁。我现在拥有的是：

/*--------------------------------
          BREAKPOINTS
--------------------------------*/
$bp-xs: max-width 768px;
$bp-sm: max-width 992px;
$bp-md: max-width 1200px;
$bp-lg: min-width 1200px;


/*--------------------------------
            HELPERS
--------------------------------*/
.hidden-xs {
    @include media($bp-xs) {
        display: none;
    }
}
.hidden-sm {
    @include media($bp-sm) {
        display: none;
    }
}
.hidden-md {
    @include media($bp-md) {
        display: none;
    }   
}
.hidden-lg {
    @include media($bp-lg) {
        display: none;
    }   
}

我想知道是否有办法简化代码。

Answer 1

您可以使用SASS控制指令来减少您正在编写的代码量，但我个人认为您目前没有看到任何错误

$breakpoints: (xs: max-width 768px, sm: max-width 992px, md: max-width 1200px, lg: min-width 1200px);

@each $name, $query in $breakpoints {
  .hidden-#{$name} {
    @media($query) {
      display: none;
    }
  }
}