Created
July 13, 2011 22:02
-
-
Save alecperkins/1081436 to your computer and use it in GitHub Desktop.
Basic variable-length args for a Sass mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div.foo-section h2, div.bar-section h2 { height: 20px; padding-left: 30px; background-position: left top; } | |
div.foo-section h2.my { background-image: url("images/my.png"); } | |
div.foo-section h2.very { background-image: url("images/very.png"); } | |
div.foo-section h2.excellent { background-image: url("images/excellent.png"); } | |
div.foo-section h2.mother { background-image: url("images/mother.png"); } | |
div.foo-section h2.just { background-image: url("images/just.png"); } | |
div.foo-section h2.sent { background-image: url("images/sent.png"); } | |
div.foo-section h2.us { background-image: url("images/us.png"); } | |
div.foo-section h2.nine { background-image: url("images/nine.png"); } | |
div.foo-section h2.pizzas { background-image: url("images/pizzas.png"); } | |
div.bar-section h2.my { background-image: url("images/my_active.png"); } | |
div.bar-section h2.mother { background-image: url("images/mother_active.png"); } | |
div.bar-section h2.told { background-image: url("images/told_active.png"); } | |
div.bar-section h2.me { background-image: url("images/me_active.png"); } | |
div.bar-section h2.never { background-image: url("images/never_active.png"); } | |
div.bar-section h2.to { background-image: url("images/to_active.png"); } | |
div.bar-section h2.repeat { background-image: url("images/repeat_active.png"); } | |
div.bar-section h2.myself { background-image: url("images/myself_active.png"); } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=header-icons($labels, $suffix: '') | |
// where $labels is a space-separated list | |
@each $label in $labels | |
h2.#{ $label } | |
background-image: url('images/#{ $label }#{ $suffix }.png') | |
// Business as usual | |
div.foo-section, div.bar-section | |
h2 | |
height: 20px | |
padding-left: 30px | |
background-position: left top | |
// Now some magic. The sections need slightly different results for the same class. | |
div.foo-section | |
+header-icons(my very excellent mother just sent us nine pizzas) | |
div.bar-section | |
+header-icons(my mother told me never to repeat myself, _active) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment