0

以下をlessCSSforloopに入れて、各セクション変数の数だけが各ループでセクション1からセクション4に更新されるようにすることは可能ですか？

//ループが始まります

.section1 {
    .color {
         color: @section1;
    }
    .colorBG-medium{
         background-color: @section1;
    }
    .colorBG, .tab.active a {
         background-color: @section1;
         &:hover{
             background-color: @section1;
         }
    }
}

//ループが終了します

ありがとう！

4

2 に答える 2

2

冷凍エンドウ豆のロディによって示されたリンクによると、はい、ループを行うことは可能ですが、それを数値に使用することは意味があります。あなたの場合、コードの可読性を向上させるなど、ミックスインを使用することをお勧めします。

#foo {
    .bar (@color) {
        .color { color: @color; }
        .colorBG-medium {
            background-color: @color;
        }
        .colorBG, .tab.active a {
            background-color: @color;
            &:hover{
                background-color: @color;
            }
        }
    }
}

.section1 {
  #foo > .bar(red);
}

.section2 {
  #foo > .bar(blue);
}

結果：

.section1 .color {
  color: #ff0000;
}
.section1 .colorBG-medium {
  background-color: #ff0000;
}
.section1 .colorBG,
.section1 .tab.active a {
  background-color: #ff0000;
}
.section1 .colorBG:hover,
.section1 .tab.active a:hover {
  background-color: #ff0000;
}
.section2 .color {
  color: #0000ff;
}
.section2 .colorBG-medium {
  background-color: #0000ff;
}
.section2 .colorBG,
.section2 .tab.active a {
  background-color: #0000ff;
}
.section2 .colorBG:hover,
.section2 .tab.active a:hover {
  background-color: #0000ff;
}
于 2012-09-04T02:35:45.947 に答える
1

その結果を達成するためのおそらくより良い方法は、ミックスインを利用することです。何かのようなもの：

.section-color (@color) {
    .color {
         color: @color;
    }
    .colorBG-medium{
         background-color: @color;
    }
    .colorBG, .tab.active a {
         background-color: @color;
         &:hover{
             background-color: @color;
         }
    }
}

.section1 {
    .section-color(red);
}
.section2 {
    .section-color(#123456);
}
/* ... */
于 2012-09-04T02:34:17.620 に答える