css - 如何为 mixin 列表多次生成一个类？

Question

我是这个元素的开发人员之一，我们的 SASS 是由设计师交付的。我只了解 SASS 的基础知识，所以我不确定这是否可行。

我有一个类，我想生成多次，类名应该根据混入而改变。

这些是混入:

@mixin small-tablet
{
    @media only screen and (max-width:767px)
    {
        @content;
    }
}

@mixin mobile
{
    @media only screen and (max-width:480px)
    {
        @content;
    }
}

这是我要添加的部分(伪代码):

@include small-tablet, mobile
{
    table.responsive-@mixin-name
    {
        display: block;
    }
}

输出应该是这样的:

@media only screen and (max-width:767px)
{
    table.responsive-small-tablet
    {
        display: block;
    }
}

@media only screen and (max-width:480px)
{
    table.responsive-mobile
    {
        display: block;
    }
}

我怎样才能得到这个结果？

Answer 1

你可以这样试试

$mobile: 480;
$smalltablet: 767;


@mixin mq($width) {
    @media only screen and (max-width:#{$width}px) {
        @content;
    }
}

@mixin generateMediaqueries {
    @include mq($mobile) {
      &-mobile {
        @content; 
      }
    }
    @include mq($smalltablet) {
      &-small-tablet {
        @content;
      }
    }
}

table.responsive {
  @include generateMediaqueries {
     display: block;
  }
}

---

结果输出:

@media only screen and (max-width: 480px) {
  table.responsive-mobile {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  table.responsive-small-tablet {
    display: block;
  }
}