我想通過使用LESS來簡化這些CSS，怎麼樣？

-3

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` 
     } 
    }

來源

2017-07-19 M.Joe

首先，_wut_。其次，你究竟想要什麼？ – Clonkex

請參閱https://stackoverflow.com/search?q=%5Bless%5D+loop。 –

我從來沒有使用少，但我使用sass，你可以使用循環。

你應該閱讀this page

如果我沒有錯，更少的代碼將是類似的東西（只能看不能，因爲我用SASS）：

.generate-icons(3); 

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

來源

2017-07-19 10:02:43 Kangouroops

Thx，夥計，你幫了我很多。你是真正的MVP！ –

我很高興可以幫忙;） – Kangouroops

首先。這不是很好的CSS。第一個{之間li:nth-child()和.icon和最後}是不需要的。正確的CSS表格將是li:nth-child() .icon { }

第二，什麼是image1,image2,image3？這也是不標準的CSS

用量少，你可以做以下

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，但給我講述了HTML結構的詳細信息，我也許能幫助你更多

來源

2017-07-19 09:18:42

對不起，可能我沒有說清楚。我想要的只是循環，我想用循環來完成它。不是我關心的結構，而是循環。你能解決嗎？ –

我想通過使用LESS來簡化這些CSS，怎麼樣？

回答

相關問題