scottkellum

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// Modular Scale (v2.0.5)
// ----

@import 'modular-scale';

$ms-base: 1rem;
$ms-ratio: $golden; // 1.618

scottkellum

<div class="container-broken">
  <div class="hero">
    <div class="right-arrow"></div>  
    <div class="left-arrow"></div>
  </div>
</div>

<div class="description">The blue boxes should overlap the black borders by -10/10px:</div>

<div class="container">

scottkellum

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// Modular Scale (v2.0.5)
// ----

@import 'modular-scale';

.animated-thing {
  animation: do-a-barrel-roll ms(4,160ms) forwards ease;

scottkellum

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

$scope-test: true;

@mixin scope-test() {
  $scope-test: false;
} @include scope-test;

scottkellum

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

$MS-scope-exists: feature-exists(global-variable-shadowing) == true;

$ms-context: null;

@mixin msr() {

scottkellum

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

// How to avoid the !global variable fuckshow

// Do this:

$argument: true;

scottkellum

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

@import 'compass';

div {
  @include transform(translateX(5px));
}

scottkellum

<div class="content">
  <div class="one">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="two">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="three">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="four">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuer

scottkellum

<div class="content">
  <div class="one">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="two">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="three">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</div>
  <div class="four">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuer

scottkellum

<div class="neue"></div>
<div class="darkenlighten"></div>
<div class="tintshade"></div>