Sass:通过变量迭代链接选择器

Question

我正在使用Sass索引语法，尽管可以通过SCSS回答

这是循环的嵌套部分，在循环中，我希望在每次迭代中使用变量来命名选择器：

$class: 2      
@for $i from 1 through 2
  @if $i == 1
    $sel: link
  @if $i == 2
    $sel: visited
  div #s-#{$class} ul
    &:nth-child(1) li
      &:nth-child(2) a
        &:$sel
          color: $cc

但我得到了：

"Syntax error: Invalid CSS after \"&:\": expected pseudoclass or pseudoelement, was \"$sel\"\A

(是的，我看出来是语法错误)

我在找这样的输出：

div #s-2 ul:nth-child(1) li:nth-child(2) a:link {
  color: #cc0000;
}

div #s-2 ul:nth-child(1) li:nth-child(2) a:visited {
  color: #cc0000;
}

Sass能做这样的事吗？如果是的话，怎么做？

Answer 1

有一种更好(更明显)的方法来实现我想要实现的目标(以$i从1到1为例)：

$class: 2   
@for $i from 1 through 1
  div #s-#{$class} ul
    &:nth-child(1) li
      &:nth-child(2) a
        &:visited, &:link
          color: $cc

输出

div #s-2 ul:nth-child(1) li:nth-child(2) a:visited, div #s-2 ul:nth-child(1) li:nth-child(2) a:link {
  color: #cc0000;
}

虽然我对用选择器作为变量的方法很好奇

Answer 2

尝试使用#{$sel}

$class: 2
$cc: #cc0000
@for $i from 1 through 2
  $sel: ()
  @if $i == 1
    $sel: link
  @if $i == 2
    $sel: visited
  div #s-#{$class} ul
    &:nth-child(1) li
      &:nth-child(2) a
        &:#{$sel}
          color: $cc

这意味着：

div #s-2 ul:nth-child(1) li:nth-child(2) a:link {
  color: #cc0000; }

div #s-2 ul:nth-child(1) li:nth-child(2) a:visited {
  color: #cc0000; }

请注意，我必须在ifs之前初始化$sel，可能是因为否则它将保留在每个if的范围内。我昨天才学会的，所以我很可能是错的。;)