@extend
could easily not work because cascading order is determined by order in which parent selectors are written.
Can we limit 2nd-order inheritance?
@extend
could easily not work because cascading order is determined by order in which parent selectors are written.
Can we limit 2nd-order inheritance?
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
@mixin bah { | |
&%foo { | |
color: red; | |
} | |
} |
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
/* | |
A slightly more automated approach to BEM modifier classes: | |
using '&' parent selector interpolation, modifiers extend their bases, | |
so that HTML markup requires only the modifier class not the base *and* modifier | |
*/ |
%nav.vertical | |
%h1.header.vertical--first header | |
%ul.list.vertical--last | |
%li.item | |
%a.link blah | |
- for i in 1..2 do | |
%li.item__nested | |
%a.link nested! | |
%ul.list | |
%li.item |
.parent | |
.child boo | |
.child baz | |
.foo | |
.child blah | |
.child | |
bar |
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
// non-default var defined after | |
$foo: blue !default; | |
$foo: red; | |
.bar { |
<div></div> |
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
@for $d from 1 to 10 { | |
%color-#{$d} { | |
color: scale(red, 10% * $d); | |
} | |
} |
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
%foo { | |
color: bue; | |
} | |
.blah { |
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
$tooltip-arrow-width: 7px; | |
$tooltip-arrow-offset: $tooltip-arrow-width * 2; | |
$white: white; | |
$border-color: gray; |