Skip to content

Instantly share code, notes, and snippets.

@whizark
Created August 31, 2014 07:38
Show Gist options
  • Save whizark/97c8713818870f7a7c47 to your computer and use it in GitHub Desktop.
Save whizark/97c8713818870f7a7c47 to your computer and use it in GitHub Desktop.
Sass: Polymorphic placeholder & mixins #sass
<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>
// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----
// Polymorphic placeholders & mixins
// Mixins: you may directly use these mixins.
// Button base (or generic button) mixin
@mixin button--base($parameters: ()) {
display: inline-block;
padding: .5em;
color: #fff;
background: #f00;
font-size: 1rem;
}
// Button mixin for <a>
@mixin button--a($parameters: ()) {
text-align: center;
text-decoration: none;
}
// Button mixin for <button>
@mixin button--button($parameters: ()) {
border: 0;
}
// Button mixin (API)
@mixin button($parameters: ()) {
$defaults : (
type: null
);
$parameters: map-merge($defaults, $parameters);
$type : map-get($parameters, "type");
@if ($type == "a") {
// <a> button
@include button--a($parameters);
} @else if ($type == "button") {
// <button> button
@include button--button($parameters);
} @else {
// Button base
@include button--base($parameters);
}
}
// Placeholders: you should separate your component(s) from concrete selector(s)
// Generic button
%button {
$parameters: ();
@include button($parameters);
}
// <a> button
a%button {
// @todo try to find better way...
// for exmple, using selector functions?
// parsing/replacing selector?
// $type: selector-replace(&, "%button", "a");
$type : "a";
$parameters: (
type: $type
);
@include button($parameters);
}
// <button> button
button%button {
// @todo try to find better way...
// for exmple, using selector functions?
// parsing/replacing selector?
// $type: selector-replace(&, "%button", "a");
$type : "button";
$parameters: (
type: $type
);
@include button($parameters);
}
// Mapping placeholders to concrete selectors
a.button {
@extend %button;
}
button.button {
@extend %button;
}
a.button, button.button {
display: inline-block;
padding: .5em;
color: #fff;
background: #f00;
font-size: 1rem;
}
a.button {
text-align: center;
text-decoration: none;
}
button.button {
border: 0;
}
<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment