0

[Sass Indented 構文を使用していますが、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は可能ですか? もしそうなら、どのように？

4

2 に答える 2

0

私が達成しようとしていたことを行うためのより良い（より明白な）方法があります（例として $i from 1 to 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;
}

セレクターを変数として使用する方法についてはまだ興味がありますが

于 2012-04-15T23:16:43.527 に答える