Question

我正在尝试将@content指令从一个mixin存储到一个列表中，以便稍后可以在另一个mixin中使用它。我尝试这个时遇到错误。有人知道这是否可行？

示例是我正在做的简化版本，但基本上我想创建自定义断点类，但没有从每个类的媒体查询中获得所有额外标记。

继承我所拥有的：

$breakpoints: ((sm, 320px), (md, 780px), (lg, 960px));
$all: ();

@mixin push($name) {
  $content: (@content);
  $all: append($all, ($name, $content));
}

@mixin printAll() {
  @each $breakpoint in $breakpoints {
    $breakpointName: nth($breakpoint, 1);
    $breakpointSize: nth($breakpoint, 2);
    @media only screen and (min-width: $breakpointSize) {
      @each $item in $all {
        $className: nth($item, 1);
        $content: nth($item, 2);
        #{$className}-#{$breakpointName} {
          #{$content};
        }
      }
    }
  }
}

@include push(color-red){ color: red; }
@include push(color-green){ color: green; }
@include push(color-blue){ color: blue; }
@include push(totally-crazy){
  color: red;
  background-color: green;
  border-top: solid 5px brown;
  border-left: solid 5px gray;
  border-right: solid 5px blue;
  border-bottom: solid 5px yellow;
}

@include printAll();

所以基本上我想输出类似的东西：

@media only screen and (min-width: 320px) {
  //all custom classes with -sm suffix here
}

@media only screen and (min-width: 728px) {
  //all custom classes with -md suffix here
}

@media only screen and (min-width: 960px) {
  //all custom classes with -lg suffix here
}

INSTEAD：

@media only screen and (min-width: 320px) {
  //first pushed class with -sm suffix here
}

@media only screen and (min-width: 728px) {
  //first pushed class with -md suffix here
}

@media only screen and (min-width: 960px) {
  //first pushed class with -lg suffix here
}

@media only screen and (min-width: 320px) {
  //second pushed class with -sm suffix here
}

@media only screen and (min-width: 728px) {
  //second pushed class with -md suffix here
}

@media only screen and (min-width: 960px) {
  //second pushed class with -lg suffix here
}

etc..

此处示例：

http://sassmeister.com/gist/10332360

Sass：将@content存储到列表中以便稍后在另一个mixin中使用？

0 个答案: