Question

有没有办法可以获得第n个值（$ list，1）

$xs: 600px;
$sm: 960px;
$md: 1280px;
$lg: 1920px;

$list: xs, sm, md, lg;

@mixin respond($media) {
  @for $i from 1 through length($list) {
    @if $media==nth($list, 1) {
      @media only screen and (max-width: nth($list, 1) - 1px) {
        @content;
      }
    }
  }
}

我现在得到这个

@media only screen and (max-width: xs-1px) {}

我想要变量$ xs = 600px;

的值

@media only screen and (max-width: 600px - 1px) {}

我试过了：

$nth($scree-size , 1)
$#{nth($scree-size , 1)}

Answer 1

简短的回答是：不，因为您正在寻找的是动态变量名称，并且它们不受支持。但是，我建议使用地图代替更清晰的代码而不需要重复变量名称并简化你的mixin：

$breakpoints: (
  xs: 600px,
  sm: 960px,
  md: 1280px,
  lg: 1920px
);

@mixin respond($media) {
  @if map-has-key($breakpoints, $media) {
    @media only screen and (max-width: map-get($breakpoints, $media) - 1px) {
      @content;
    }
  }
}

@include respond("md") {
  .class {
    color: red;
  }
}

输出：

@media only screen and (max-width: 1279px) {
  .class {
    color: red;
  }
}

SASS：从列表返回字符串后获取变量的值

1 个答案: