SASS：隨機地從列表中選擇背景圖像

我需要輸出這一：SASS：隨機地從列表中選擇背景圖像

#footer-widgets .container .row { 
    background-image: url("RANDOMLY PICKED"); 
    background-position: right bottom; 
    background-repeat: no-repeat; 
}

...並且應該有具有4個或5鏈接到實際背景圖像（http://domain.com/blablabla/image.png）到一個列表從中挑選。我怎樣才能與SASS做到這一點？

來源

2014-02-12 MultiformeIngegno

你知道Sass是首先編譯的，只有編譯好的CSS被髮送到瀏覽器，對嗎？您可以在每次編譯時隨機生成背景圖像，但不能在每個頁面視圖中隨機生成背景圖像。 – cimmanon

Sass編譯爲css。我從來沒有聽說過css中的隨機url，因爲它的風格不是邏輯。最好的解決方案（如果你正在尋找一個隨機選擇）將是http://css-tricks.com/snippets/php/randomize-background-image/。如果你想要一個per-compile或per-page的隨機圖像，你可能需要回頭看看你的網站和消息傳遞的設計，以確保你想要的是真正的隨機選擇的圖像。 – AndrewD

最新版本的Sass (v3.3.0)增加了一個新的random函數。如果你將它與圖像列表混合在一起（以及一小段可變插值），那麼每次編譯Sass時都會隨機選擇一個CSS。例如：

$imgKey: random(5); 

$list: apple, banana, cherry, durian, eggplant; 
$nth: nth($list, $imgKey); 

body { 
    background-image: "/images/#{$nth}.jpg"; 
}

活生生的例子：http://sassmeister.com/gist/8966210

如上，隨機值僅當薩斯編譯，這並不一定是每一個你的網頁被訪問時間而改變。

來源

2014-02-12 22:58:23 KatieK

謝謝，很快就會嘗試。那麼它什麼時候編譯？ – MultiformeIngegno

每次你改變Sass，在現場的例子或如果你正在做'sass watch'。 – KatieK

如果其他人想知道'nnth'是什麼，它是一個內置的：http://sass-lang.com/documentation/Sass/Script/Functions.html#nth-instance_method – mikemaccana

SASS：隨機地從列表中選擇背景圖像

回答

相關問題