Question

我是该项目的开发人员之一，我们的SASS由设计师提供。我只知道SASS的基础知识，所以我不确定这是否可行。

我有一个我想要多次生成的类，并且类名应该根据mixin而改变。

这些是mixins：

@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;
  }
}

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

1 个答案: