從寬度轉換爲背景寬度in Less在CSS類中的精靈

我是高級CSS的新手，我一直在關注使用gruntjs，spritesmith和less生成精靈的this tutorial。我被困在如何解決以下問題。首先，我生成一個.less文件，其中包含Sprite中每個圖像的信息。它看起來是這樣的：從寬度轉換爲背景寬度in Less在CSS類中的精靈

@mobile_logout-x: 1586px; 
    @mobile_logout-y: 0px; 
    @mobile_logout-offset-x: -1586px; 
    @mobile_logout-offset-y: 0px; 
    @mobile_logout-width: 256px; 
    @mobile_logout-height: 256px;

使用咕嚕-的contrib少我現在可以使用以下方法來獲取精靈進入我的目標CSS：

減少模板

.mobile_logout { 
    .sprite(@mobile_logout); 
}

結果

.mobile_logout { 
    background-image: url(images-mobile/mobile-sprite.png); 
    background-position: -1586px 0px; 
    width: 256px; 
    height: 256px; 
}

如果我想直接在HTML中使用它，這將會很好，但是我想將它指定爲另一個CSS類的一部分。一個例子是：

.myTestButton { 
    background-image: url(images-mobile/mobile-sprite.png); 
    background-position: -1586px 0px; 
    width: 256px; 
    height: 256px; 
    color: white; 
    background-size: 1.3em 1.3em; 
    background-position: top right; 
}

的問題是，在這個階段，我不能找到一個辦法讓寬度和高度被表示爲背景寬度和背景高度，這就是我期待着去。

我試着改變sprite.less文件中的值來匹配我正在尋找的內容，但發現這是一個無效的黑客。我一直在考慮的另一個選擇是使用mixin來返回正確的寬度翻譯的項目，但是因爲這些都是從較少生成的，所以我無法獲得這些。

來源

2013-11-25 Jim

就發佈這個我看着精靈功能來自哪裏，發現我的答案在生成sprite.less文件後：

.sprite-width(@sprite) { 
    width: ~`"@{sprite}".split(', ')[4]`; 
    } 

    .sprite-height(@sprite) { 
    height: ~`"@{sprite}".split(', ')[5]`; 
    }

的sprite.less文件中生成使用mustache template。爲了解決我在Spritesmith中的問題，你可以指定一個小鬍子模板。我看着背景寬度也是不正確的，我需要的屬性是背景大小。我對內聯的嘗試也失敗了，我應該一直在考慮使用div而不是調整精靈組件的大小。

來源

2013-11-25 16:58:00 Jim

從寬度轉換爲背景寬度in Less在CSS類中的精靈

回答

相關問題