DarbyBrown

<div class="class">
  hover me
</div>
<div>
  and effect me
</div>

DarbyBrown

// ----
// libsass (v3.2.5)
// ----

$colors: (
  green: #95c11e,
  red: #e30512,
  yellow: #ffde44,
  blue: #009ee2,
  orange: #f39200

DarbyBrown

 <ul class="faq__list">
                        <li class="faq__item">
                            Unte, oponsul icaes, que ture factoraet?

                            <div class="btn--circle--small">
                                <i class="icon icon--ui__arrow-right-large">
                                    <svg>
                                        <use xlink:href="/media/images/sprites/ui.svg#arrow-right-large" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                    </svg>
                                </i>

DarbyBrown

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
 
@mixin context($old-context, $new-context) {
    @at-root #{selector-replace(&, $old-context, $new-context)} {
        @content;
    }
}

DarbyBrown

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 68 70" id="aeroplane"><defs><path id="aaa" d="M1 .09h66v69.815H1z"/></defs><clipPath id="aab"><use xlink:href="#aaa" overflow="visible"/></clipPath><path clip-path="url(#aab)" fill="none" stroke="#E3001A" stroke-width="2" stroke-linejoin="round" d="M35.084 65.072C52.254 64.5 66 50.4 66 33.09c0-17.673-14.326-32-32-32s-32 14.327-32 32"/><path clip-path="url(#aab)" fill="none" stroke="#E3001A" stroke-width="2" stroke-linejoin="round" d="M38.64 68.905l.635-.773-3.81-3.13 3.402-3.57-.725-.69L34 65.09zM53.016 34.68H40.603l-7.02 17.132c-.057.136-.19.224-.335.224h-4.575c-.225 0-.396-.203-.356-.424L31.32 34.68 20 33.957l-3.762 3.518c-.067.063-.155.098-.247.098h-2.638c-.317 0-.48-.378-.264-.61l4.763-5.085-4.783-5.27c-.21-.234-.046-.606.267-.606h2.657c.093 0 .18.035.248.097l3.76 3.518

DarbyBrown

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 12 6.5" enable-background="new 0 0 12 6.5" id="arrow-bottom"><defs><path id="aaa" d="M.3.4h11.3v5.8H.3z"/></defs><clipPath id="aab"><use xlink:href="#aaa" overflow="visible"/></clipPath><path clip-path="url(#aab)" fill="#1D1D1B" d="M6 6.1L.3 2 1.5.4 6 3.7 10.5.4 11.7 2z"/></symbol><symbol viewBox="0 0 17 9" enable-background="new 0 0 17 9" id="arrow-bottom-white"><path fill="#fff" d="M8.5 8.3l-8.1-6L1.6.7l6.9 5.1L15.4.7l1.2 1.6z"/></symbol><symbol viewBox="0 0 10 18" enable-background="new 0 0 10 18" id="arrow-left"><defs><path id="aca" d="M.6.9h8.8v16.2H.6z"/></defs><clipPath id="acb"><use xlink:href="#aca" overflow="visible"/></clipPath><path clip-path="url(#acb)" fill="#1D1D1B" d="M7.9 17.1L.6 9 7.9.9l1.5 1.4L3.3 9l6.1 6.7z"/></symbol><symbol viewBox="0 0 10 19" enable-

DarbyBrown

// ----
// libsass (v3.2.0-beta.6)
// ----

$breakpoints: 480px 640px 900px;

@mixin cycle-breakpoints() {
    @for $i from 1 through length($breakpoints) {
      $i: $i !global;
      $val: nth($breakpoints, $i);

DarbyBrown

<div>Im red</div>

DarbyBrown

<div>Im red</div>

DarbyBrown

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

@mixin create-grids($cols: 12, $bps: (sm 480px, md 640px, lg 860px)) {

    .col {
        width: 100%;
     }