私はLESSを使ってCSSを単純化したいのですが、どうですか？

Question

li:nth-child(1){ 
     .icon{ 
     background: url('ico_1.png') no-repeat;`image1` 
     } 
    } 

li:nth-child(2){ 
     .icon{ 
     background: url('ico_2.png') no-repeat;`image2` 
     } 
    } 

li:nth-child(3){ 
     .icon{ 
     background: url('ico_3.png') no-repeat;`image3` 
     } 
    } 

Answer 1

私はLessを一度も使用しませんでしたが、私はsassを使用してループを使用できます。

あなたは、私が間違っていないよ場合は、以下のコードはそのような何か（私はSASSを使用してみてくださいませんでした）だろうthis page

をお読みください：

.generate-icons(3); 

.generate-icons(@n, @i: 1) when (@i =< @n) { 
    li:nth-child(@{i}) .icon { 
    background-image:url('ico_@{i}.png') 
    } 
    .generate-icons(@n, (@i + 1)); 
} 

Answer 2

まずは、それは良いCSSではありません。 li:nth-child()と.iconの間の最初の{と最後の}は必要ありません。正しいCSSフォームはli:nth-child() .icon { }

,image2,image3となります。それはまた、あなたが、私は、これは必ずしもCSSを簡素化しますが、私のHTML構造についての詳細な情報を与え、私はもっとあなたを助けることができるかもしれないしません知っている次

li { 
    .icon { 
    background-repeat:no-repeat; 
    /* all background common styles here */ 
    } 
$:first-child .icon { 
    background-image:url('ico_1.png') 
    } 
$:nth-child(2) .icon { 
    background-image:url('ico_2.png') 
    } 
$:nth-child(3) .icon { 
    background-image:url('ico_3.png') 
    } 
} 

を行うことができます以下では、標準のCSS

ではありません