alice-liu

@extend could easily not work because cascading order is determined by order in which parent selectors are written.

Can we limit 2nd-order inheritance?

alice-liu

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@mixin bah {
    &%foo {
        color: red;
    }
}

alice-liu

// ----
// 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
*/

alice-liu

%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

alice-liu

.parent
  .child boo
  .child baz
  .foo
    .child blah
  .child
    bar

alice-liu

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// non-default var defined after
$foo: blue !default;
$foo: red;

.bar {

alice-liu

<div></div>

alice-liu

// ----
// 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);
  }
}

alice-liu

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

%foo {
  color: bue;
}

.blah {

alice-liu

// ----
// 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;