Created
November 13, 2013 09:14
-
-
Save mturjak/7446047 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| //--------------------------------------------------------// | |
| // defining your map: | |
| $brand_clr: (home: blue, about: orange, contact: yellow); | |
| /*--------------------------------------------------------*/ | |
| /* iterating the map with @each */ | |
| @each $brand, $clr in $brand_clr { | |
| body.#{$brand} { | |
| background: $clr; | |
| } | |
| // and so on for other rules with brand specific styling | |
| } | |
| /*--------------------------------------------------------*/ | |
| /* or using the map-get() function */ | |
| body{ | |
| &.about { | |
| background: map-get($brand_clr, about); | |
| } | |
| } | |
| /*--------------------------------------------------------*/ | |
| /* using mixins */ | |
| $color: null; | |
| @mixin branding { | |
| @each $brand, $clr in $brand_clr { | |
| &.#{$brand} { | |
| $color: $clr; | |
| @content; | |
| } | |
| } | |
| } | |
| body { | |
| @include branding { | |
| background: $color; | |
| } | |
| } | |
| button { | |
| /* general button styles */ | |
| @include branding { | |
| color: $color; | |
| } | |
| } |
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
| /*--------------------------------------------------------*/ | |
| /* iterating the map with @each */ | |
| body.home { | |
| background: blue; | |
| } | |
| body.about { | |
| background: orange; | |
| } | |
| body.contact { | |
| background: yellow; | |
| } | |
| /*--------------------------------------------------------*/ | |
| /* or using the map-get() function */ | |
| body.about { | |
| background: orange; | |
| } | |
| /*--------------------------------------------------------*/ | |
| /* using mixins */ | |
| body.home { | |
| background: blue; | |
| } | |
| body.about { | |
| background: orange; | |
| } | |
| body.contact { | |
| background: yellow; | |
| } | |
| button { | |
| /* general button styles */ | |
| } | |
| button.home { | |
| color: blue; | |
| } | |
| button.about { | |
| color: orange; | |
| } | |
| button.contact { | |
| color: yellow; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment