SASS: randomly pick background-image from a list

by

The most recent version of Sass (v3.3.0) adds a new random function. If you mix that with a list of images (and a wee bit of variable interpolation), you will have CSS with a randomly selected background image every time Sass is compiled. Example:

$imgKey: random(5);

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

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

Live example: http://sassmeister.com/gist/8966210

As above, the random value will only change when the Sass is compiled, which won’t necessarily be every time your page is visited.

More Related Contents:

  1. Can I use variables for selectors?
  2. how do I make device specific selectors in css [closed]
  3. Is there a “previous sibling” selector?
  4. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  5. CSS selector for first element with class
  6. What does the “+” (plus sign) CSS selector mean?
  7. Is there a CSS selector by class prefix?
  8. How do I select an element based on the state of another element in the page with CSS?
  9. Does the order of classes listed on an item affect the CSS?
  10. Angular-cli from css to scss
  11. Select all child elements recursively in CSS
  12. CSS “and” and “or”
  13. Using the last-child selector
  14. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  15. What is the difference between :focus and :active?
  16. How can I select an nth child without knowing the parent element?
  17. How to select label for=”XYZ” in CSS?
  18. @import in @if statement in Sass
  19. In which direction do selector engines read, exactly?
  20. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  21. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  22. Can I colour backgrounds of selected items in HTML select options with CSS only?
  23. CSS3 combining selectors with OR instead of AND
  24. Why doesn’t this CSS :not() declaration filter down?
  25. How to show the first N elements of a block and hide the others in css?
  26. Does LESS have an “extend” feature?
  27. What is the difference between :before and ::before?
  28. What CSS selector can be used to select the first div within another div
  29. CSS Selector for not a child of element type?
  30. CSS selector based on width?

Leave a Comment