Skip to content

Instantly share code, notes, and snippets.

@rcaracaus
Created May 1, 2013 05:18
Show Gist options
  • Save rcaracaus/5493856 to your computer and use it in GitHub Desktop.
Save rcaracaus/5493856 to your computer and use it in GitHub Desktop.
Demonstrating how you can redefine placeholder selectors in sass.
// 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