SASS列表变量默认值

Question

我在SASS和一些班级中有以下列表：

$list: 10px, 15px, 20px

.class1: nth($list, 1)
.class2: nth($list, 2)
.class3: nth($list, 3)

是否要为列表设置默认值，因此如果我没有显示3个不同的值，nth($list, 3)不会返回错误并指定默认值？< / p>

Answer 1

index（）对我不起作用，因为它需要将值作为第二个参数。 我建议使用函数作为列表值的getter，如：

$list: 10px, 15px, 20px;

@function getListEntry ($list, $index) {
  @if length($list) >= $index { 
    @return nth($list, $index); 
  };
  @return 0px;
}

.class1{
  margin: getListEntry($list, 1)
} 

DEMO

Answer 2

您可以使用sass的Index和if函数来检查列表中是否存在索引。

例如，如果您将默认值设置为2：

$value: index($list,4);
@if $value == null {
  $value: 2;
} @else {
  $value : nth($list, $value);
}

希望它有所帮助。

问候。