Sass：通过变量迭代链接选择器答案

【问题标题】：Sass: Iterate link selector via variablesSass：通过变量迭代链接选择器
【发布时间】：2012-09-09 01:01:44
【问题描述】：

[我使用的是 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 有能力吗？如果有怎么办？

【问题讨论】：

标签： css compass-sass sass

【解决方案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;
}

虽然我一直对使用选择器作为变量的方法感到好奇

【讨论】：

【解决方案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; }

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

【讨论】：