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

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

@import 'compass';

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

scottkellum

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

// How to avoid the !global variable fuckshow

// Do this:

$argument: true;

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.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)
// Modular Scale (v2.0.5)
// ----

@import 'modular-scale';

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

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.2.19)
// Compass (v0.12.6)
// Modular Scale (v2.0.5)
// ----

@import 'modular-scale';

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

scottkellum

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

$colors:
  red
  green
  blue
  purple