css - 想知道是否有任何方法可以简化这段 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;
    }
  }
}