Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass: Element-type-based conditional styles inside Mixin #sass
<a class="button">A</a>
<button class="button">button</button>
<a class="button-2">A</a>
<button class="button-2">button</button>
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Sass: Element-type-based conditional styles inside Mixin
//
// Other ideas
// https://github.com/whizark/xass#ideas
// Element-type-based conditional mixin.
@mixin type($type, $selectors: null) {
$selectors: if($selectors != null, $selectors, &);
@each $selector in $selectors {
@if is-superselector($type, $selector) {
@at-root #{$selector} {
@content;
}
}
}
}
// Use case.
// Component Mixin.
@mixin button($color) {
// Universal style.
margin: 1em;
padding: 1em;
background: $color;
color: white;
font-weight: bold;
// Style for button & a element.
@include type((button, a)) {
// Using mixin & placeholder-ize is more better way.
//
// Sass: Placeholder-ize duplicated CSS declarations
// https://gist.github.com/whizark/720ffec139368fa61932
display: inline-block;
}
// Style for a element.
@include type(a) {
// Using mixin & placeholder-ize is more better way.
//
// Sass: Placeholder-ize duplicated CSS declarations
// https://gist.github.com/whizark/720ffec139368fa61932
text-decoration: none;
}
// Style for button element.
@include type(button) {
// Using mixin & placeholder-ize is more better way.
//
// Sass: Placeholder-ize duplicated CSS declarations
// https://gist.github.com/whizark/720ffec139368fa61932
border: 0;
}
}
// Concreate classes.
button.button {
@include button(red);
}
a.button {
@include button(red);
}
button.button-2,
a.button-2 {
@include button(blue);
}
button.button {
margin: 1em;
padding: 1em;
background: red;
color: white;
font-weight: bold;
}
button.button {
display: inline-block;
}
button.button {
border: 0;
}
a.button {
margin: 1em;
padding: 1em;
background: red;
color: white;
font-weight: bold;
}
a.button {
display: inline-block;
}
a.button {
text-decoration: none;
}
button.button-2,
a.button-2 {
margin: 1em;
padding: 1em;
background: blue;
color: white;
font-weight: bold;
}
button.button-2 {
display: inline-block;
}
a.button-2 {
display: inline-block;
}
a.button-2 {
text-decoration: none;
}
button.button-2 {
border: 0;
}
<a class="button">A</a>
<button class="button">button</button>
<a class="button-2">A</a>
<button class="button-2">button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment