rcaracaus

// Define Button
%button { background: red; }

// File #1
button, a.button { @extend %button; } 

// File #2
input[type=submit], #some-classs { @extend %button; }

// File #3

rcaracaus

#views_slideshow_cycle_teaser_section_slideshow-block, 
.views_slideshow_cycle_slide { @extend %cycle-overrides; }

  @include breakpoint(0px $break-slideshow) {
    %cycle-overrides { display: block !important; height: auto !important; position: static !important; opacity: 1 !important; }
  }

  @include breakpoint($break-large) {
    %cycle-overrides { width: 100% !important; }
  }

rcaracaus

@mixin hdpi-sprite($sprite-folder, $sprite) {
  $sprite-map:            sprite-map("sprites/" + $sprite-folder + "/1x/*.png", $layout: smart);
  $sprite-map-2x:         sprite-map("sprites/" + $sprite-folder + "/2x/*.png", $layout: smart);
  background: sprite($sprite-map, $sprite) no-repeat;
  @include breakpoint($hr-display) {
    background-image:sprite-url($sprite-map-2x);
    background-size:image-width(sprite-path($sprite-map)) auto;
  }
}

rcaracaus

// ----
// libsass (v0.7.0)
// ----

.component {
  content: "my component style";
  .lt-ie9 & {
    content: "my random ie fixes for JUST this component";
  }
}

rcaracaus

<div>Resize this window to get eq.js working -- weird SassMeister bug.</div>
<div class="container container--large"  >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>
    Component Body
  </div>
</div>
<div class="container container--small" >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>

rcaracaus

<div></div>
<div></div>

rcaracaus

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

.button,
%button {
  border-radius: 5px;
  a {
    text-decoration: none;

rcaracaus

<div class="featured-palette-parent">
  <div class="">asdf</div>
</div>

<div class="">
  <div class="featured-palette-child">asdf</div>
</div>

rcaracaus

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@function map-get-nested($map, $keys...) {
  @each $key in $keys {
    @if type-of($map) != 'map' {
      @return $map;
    }

rcaracaus

<div class="green">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>