csswizardry

<div class="''">Foo</div>

csswizardry

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

.btn {
  display: inline-block;
  padding: 1em;
}

csswizardry

<p><a href="#foo" id="foo">Foo</a></p>

<p class="foo-bar">Why isn’t this working?!</p>

<p><button>Submit</button></p>

csswizardry

<p><a href="#foo" id="foo">Foo</a> and <a href="#bar" id="bar">Bar</a> and <a href="#baz" id="baz">Baz</a>.</p>

<p class="foo-bar">Why isn’t this working?!</p>

<p><button>Submit</button></p>

csswizardry

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

// main.scss
$tabs-color: black;
$tabs-color-background: yellow;

$tabs-custom: (

csswizardry

<div class=foo>
  Hello world
</div>

csswizardry

<ul class="o-list-bare">
  <li>Lorem ipsum</li>
  <li>Dolor sit</li>
  <li>Amet consectetur</li>
  <li>Adipisci velit</li>
</ul>

<hr />

<ul class="o-list-inline">

csswizardry

<ul class="o-list-bare">
  <li>Lorem ipsum</li>
  <li>Dolor sit</li>
  <li>Amet consectetur</li>
  <li>Adipisci velit</li>
</ul>

<hr />

<ul class="o-list-inline">

csswizardry

<div class=header>
  <a href="#0">Foo</a>
  
  <a href="#0" id=btn class=btn>Foo</a>
</div>

csswizardry

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

$tabs-custom: (
 box-shadow: '0 0 10px red',
 font-weight: bold,
);