這個LESS sprite簡寫規範中的參數是什麼？

我對LESS相當陌生，而且我有一些代碼 - 似乎可行 - 對於一個給我看起來像這樣的精靈。首先一個變量的定義如下：這個LESS sprite簡寫規範中的參數是什麼？

@my_img: 0px 105px 0px -105px 22px 22px 44px 150px 'sprites/sprite-img.png';

，此變量被這樣使用：

這

.someClass { 
     .sprite(@my_img); 
}

CSS輸出是這樣的：

.someClass{ 
    background-image: url("sprites/sprite-img.png"); 
    background-position: 0 -105px; 
    height: 22px; 
    width: 22px; 
}

什麼該做參數變量定義表明？最後一個（url）是顯而易見的，我相信從看到第3個和第4個似乎是背景位置偏移（X和Y）的精靈。但其他人呢？這個變量中的9個元素都指定了什麼？

？
？
水平位置
垂直位置
寬度
高度
？
？
背景圖片的URL

來源

2014-05-09 Shawn

無需猜測。只需找到'.sprite'混音定義（它應該在你使用的較少的文件中）並查看它如何擴展其參數。 –

啊，我明白了，我錯誤地認爲.sprite是LESS本身的一部分。我會四處挖掘，看看我能否找到它的定義。 – Shawn

@ seven-phases-max我發現了mixin的定義...如果你想要把我作爲答案放到你自己的一箇中，我會接受它。謝謝。 – Shawn

在其他答案的評論有助於使明確表示，.sprite使用其實並沒有少部分，但是是一個mixin定義如下。所以變量定義中的額外東西根本不在精靈中使用，但存在於其他用途。

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

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

    .sprite-position(@sprite) { 
    @sprite-offset-x: ~`"@{sprite}".split(', ')[2]`; 
    @sprite-offset-y: ~`"@{sprite}".split(', ')[3]`; 
    background-position: @sprite-offset-x @sprite-offset-y; 
    } 

    .sprite-image(@sprite) { 
    @sprite-image: ~`"@{sprite}".split(', ')[8].slice(1, -2)`; 
    background-image: url(@sprite-image); 
    } 

    .sprite(@sprite) { 
    .sprite-image(@sprite); 
    .sprite-position(@sprite); 
    .sprite-width(@sprite); 
    .sprite-height(@sprite); 
    }

來源

2014-05-09 16:35:29 Shawn

這個LESS sprite簡寫規範中的參數是什麼？

回答

相關問題