用LESS減少sprite CSS？

生成CSS精靈效果所需的代碼的回覆似乎是使用LESS的最佳例子。用LESS減少sprite CSS？

但是除了標準化基礎，懸停和活動增量（下面），我看不到任何進一步的方式來減少所需的代碼行。

任何人都可以提出改進futher：

@sprite-base:0px; 
@sprite-hover:20px; 
@sprite-active:40px; 

.zone-user .region-user-second ul.text-size li.one a { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base transparent; 
} 
.zone-user .region-user-second ul.text-size li.two a { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base transparent; 
} 

etc ... 

.zone-user .region-user-second ul.text-size li.one a:hover { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base - @sprite-hover transparent; 
} 
.zone-user .region-user-second ul.text-size li.two a:hover { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base - @sprite-hover transparent; 
} 


.zone-user .region-user-second ul.text-size li.one a.active { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base - @sprite-active transparent; 
} 
.zone-user .region-user-second ul.text-size li.two a.active { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base - @sprite-active transparent; 
} 

etc ...

來源

2011-10-06 Jon Hadley

您未能充分利用LESS嵌套規則的最大特點之一。它可以更容易地識別發生了什麼，並且我認爲它更易於閱讀。你也寫的代碼少得多。下面是我如何嵌套你在你的問題中顯示的規則：

@sprite-base:0px; 
@sprite-hover:20px; 
@sprite-active:40px; 


.zone-user .region-user-second ul.text-size li a { 
    background: url("../img/sprite-accessibility.gif") no-repeat scroll transparent; 

    &.one { 
     background-position: 0px @sprite-base; 

     &:hover { 
      background-position:0px (@sprite-base - @sprite-hover); 
     } 

     &.active { 
      background-position:0px (@sprite-base - @sprite-active); 
     } 
    } 
    &.two { 
     background-position:-25px @sprite-base; 

     &:hover { 
      background-position:-25px (@sprite-base - @sprite-hover); 
     } 

     &.active { 
      background-position:-25px (@sprite-base - @sprite-active); 
     } 
    } 

}

來源

2011-10-06 13:39:07

嗯，這是我會怎麼做。（不LESS ..或者更多..）

工作例如：http://jsfiddle.net/lollero/gE7df/

CSS：

.Element { 
    background-image: url('path/to/img.jpg'); 
    background-repeat: no-repeat; 
} 

.E-1 { background-position: 0px 0px; } 
.E-1:hover { background-position: -20px 0px; } 

.E-2 { background-position: 0px -25px; } 
.E-2:hover { background-position: -20px -25px; } 

.E-3 { background-position: 0px -55px; } 
.E-3:hover { background-position: -20px -55px; }

HTML：

<div class="Element E-1"></div> 
<div class="Element E-2"></div> 
<div class="Element E-3"></div>

編輯：我想我有一個腦屁什麼的..我在我的CSS例子中修復了一個巨大的錯誤。

來源

2011-10-06 10:58:29 Joonas

用LESS減少sprite CSS？

回答

相關問題