Created
May 1, 2013 05:18
-
-
Save rcaracaus/5493856 to your computer and use it in GitHub Desktop.
Demonstrating how you can redefine placeholder selectors in sass.
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
// Define Button | |
%button { background: red; } | |
// File #1 | |
button, a.button { @extend %button; } | |
// File #2 | |
input[type=submit], #some-classs { @extend %button; } | |
// File #3 | |
input[type=another], #some-other-classs { @extend %button; } | |
// another file with block that needs special buttons, but you don't want | |
#custom-block { | |
%button { | |
background: green; | |
// redefining %button here will reprint everything with %button extends with #foo class in front | |
} | |
} | |
// output | |
button, a.button, input[type=submit], #some-classs , input[type=another], #some-other-classs { | |
background: red; | |
} | |
#custom-block button, #custom-block a.button, #custom-block input[type=submit], #custom-block #some-classs, #custom-block input[type=another], #custom-block #some-other-classs { background: green; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment