// SCSS
.menu {
  @include element('item')
}

// CSS
.menu {
}

.menu__item {
}

// SCSS
.menu {
  @include if-its('open')
} 

// CSS
.menu {
}

.menu.is-open {
}

// Source
.button {
	background: blue;

	@include modifier(save) {
		background: green;
	}
}

// Output
.button {
	background: blue;
}
.button--save {
 	background: green;
}

// SCSS
 @include new('menu');
 @include new('menu', 'component')
 @include new('page', 'object')
 
// CSS
.menu {}
.c-menu {}
.o-page {}

// Source
.button {
background: blue;
	
	@include parent-option(create) {
		background: green;
	}
}

// Output
.button {
	background: blue;
}
.parent--create .button {
 	background: green;
}

// SCSS
.el {
  color: $c-blizzardblue;
    
  @include when-inside('.sidebar') {
    color: $c-frostbite;
  }
} 

// CSS
.el {
  color: #ace5ee;
}

.sidebar .el {
  color: #e936a7;
}

// SCSS
.menu {
  @include when('fixed')
} 

// CSS
.menu {
}

.menu--fixed{
}

is-bool(true)    // returns true
is-bool(false)   // returns true
is-bool(test)    // returns false
is-bool(1)       // returns false
is-bool(null)    // returns false

is-color(#333)   //returns true
is-color(black)  //returns true
is-color(test)   //returns false

is-empty('')     //returns true
is-empty(())     //returns true
is-empty('test') //returns false

is-float(-1.5) //returns true
is-float(1.5) //returns true
is-float(1)   //returns false
is-float(1em) //returns false

is-integer(1)   //returns true
is-integer(-50) //returns true
is-integer(1.5) //returns false
is-integer(1em) //returns false

is-list(a b)          //returns true
is-list(1 2 3)        //returns true
is-list((test, test)) //returns true
is-list(test)         //returns false
is-list(1)            //returns false

is-negative(-1)   //returns true
is-negative(0)   //returns true
is-negative(1)   //returns false

is-null(null)  //returns true
is-null(false) //returns false
is-null(0) //returns false

is-number(1)   //returns true
is-number('1') //returns false
is-number(1em) //returns false

is-positive(1)   //returns true
is-positive(0)   //returns true
is-positive(-1)   //returns false

is-string(test) //returns true
is-string(1)    //returns false

ul li {
    @include after-first(4) { color: red; }
}

ul li {
    @include all-but-first-last(3, 9) { color: red; }
}

ul li {
    @include all-but(3, 9) { color: red; }
}

ul li {
    @include at-least(4) { color: red; }
}

ul li {
    @include at-least(6, '*') { color: blue; }
}

ul li {
    @include at-most(4) { color: red; }
}

ul li {
    @include at-most(6, '*') { color: blue; }
}

ul li {
    @include between(4, 8) { color: red; }
}

ul li {
     @include between(6, 10, '*') { color: blue; }
}

ul li {
    @include not-unique() { color: red; }
}

ul li {
    @include even-between(4, 10) { color: red; }
}

ul li {
    @include even() { color: red; }
}

ul li {
    @include every(3, 9) { color: red; }
}

ul li {
    @include exactly(4) { color: red; }
}

ul li {
    @include exactly(6, '*') { color: blue; }
}

ul li {
    @include first-child() { color: red; }
}

ul li {
    @include first-last() { color: red; }
}

ul li {
    @include first-of(3) { color: red; }
}

ul li {
    @include first(4) { color: red; }
}

ul li {
    @include from-end(4) { color: red; }
}

ul li {
    @include from-first-last(3, 9) { color: red; }
}

ul li {
    @include last-child() { color: red; }
}

ul li {
    @include last-of(3) { color: red; }
}

ul li {
    @include last(4) { color: red; }
}

ul li {
    @include middle(3, 9) { color: red; }
}

ul li {
    @include n-between(3, 9) { color: red; }
}

ul li {
    @include not-unique() { color: red; }
}

ul li {
    @include odd-between(3, 9) { color: red; }
}

ul li {
    @include odd() { color: red; }
}

ul li {
    @include only() { color: red; }
}

// Usage
.el {
    color: get-lightest($green-palette);
}

// Output
.el {
    color: #f4f1f3;
}

// Usage
.el {
    color: get-lighter($green-palette);
}

// Output
.el {
    color: #d5d5d5;
}

// Usage
.el {
    color: get-light($green-palette);
}

// Output
.el {
    color: #c2c3c0;
}

// Usage
.el {
    color: get-base($green-palette);
}

// Output
.el {
    color: lightgreen;
}

// Usage
.el {
    color: get-dark($green-palette);
}

// Output
.el {
    color: #79b079
}

// Usage
.el {
    color: get-darker($green-palette);
}

// Output
.el {
    color: #4f864f;
}

// Usage
.el {
    color: get-darkest($green-palette);
}

// Output
.el {
    color: #497c49;
}

.mt-4 { margin-top: 1rem; }

@include media screen and (min-width >= 48em) {
  .md:mt-4 { margin-top: 1rem; }
}

@include media screen and (min-width >= 62em) {
  .lg:mt-4 { margin-top: 1rem; }
}

<div class="mt-4 md:mt-6 lg:mt-8"></div>

.sans { font-family: 'source-sans-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

<p class="sans"></p>

.text-xs { font-size: 12px; font-size: .75rem; }
.text-lg { font-size: 20px; font-size: 1.25rem; }

<h1 class="text-3xl md:text-4xl"></h1>

.text-hairline { font-weight: 200 }
.text-regular  { font-weight: 400 }

<h1 class="text-regular"></h1>

.tracking-tight { letter-spacing: -.05em; }
.tracking-wide  { letter-spacing: .2em; }

<h3 class="tracking-wide"></h3>

.leading-none   { line-height: 1; }
.leading-normal { line-height: 1.5; }

<p class="leading-normal"></p>

.bg-top-left { background-position: left top; }
.bg-center   { background-position: center center; }
.bg-right    { background-position: right center; }

<div class="bg-center"></div>

.bg-base             { background-color: #fff; }
.hover:bg-base:hover { background-color: #fff; }
.focus:bg-base:focus { background-color: #fff; }

<button class="bg-base hover:bg-base"></button>

.color-base             { color: #111; }
.hover:color-base:hover { color: #111; }
.focus:color-base:focus { color: #111; }

<p class="color-base focus:color-base"></p>

.bd-base             { border-color: #aaa; }
.hover:bd-base:hover { border-color: #aaa; }
.focus:bd-base:focus { border-color: #aaa; }

<p class="bd-base focus:bd-base"></p>

.bd-0 { border-width: 0; }
.bd-t-1 { border-top-width: 1px; }

<p class="bd-t-1"></p>

.rounded-0    { border-radius: 0; }
.rounded-pill { border-radius: 9999px; }

<div class="rounded-pill"></div>

.b-shadow-base             { box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.hover:b-shadow-base:hover { box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.focus:b-shadow-base:focus { box-shadow: 0 2px 4px rgba(0,0,0,.5); }

<div class="b-shadow-base focus:b-shadow-base"></div>

.t-shadow-base             { text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.hover:t-shadow-base:hover { text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.focus:t-shadow-base:focus { text-shadow: 0 2px 5px rgba(0,0,0,.5); }

<div class="t-shadow-base focus:t-shadow-base"></div>

.navbar { height: config('navbar', $sizing-heights); }
.site-red { background-color: config('base', $backgrounds); }

.navbar { height: 3em; }
.site-red { background-color: # }

// Usage
.foo {
    margin-bottom: pow(2, 2) + 0px;
}

.foo {
    margin-bottom: 4px;
}

// Usage
.foo {
    $num: fact(3);
}

.foo {
    $num: 6;
}

$items : rand(5, 10);

.class {
  color: black;

  @include theme('red') { color: red; }
  @include theme('blue') { color: blue; }
}

// app.scss
$theme: 'default';

// red.scss
$theme: 'red';

// blue.scss
$theme: 'blue';

/* app.css */
.class { color: black; }

/* red.css */
.class { color: red; }

/* blue.css */
.class { color: blue; }

// Usage
.el {
    color: crayola('blackcoralpearl');
}

// Output
.el {
    color: #54626f;
}

// Usage
.el {
    color: pantone('Reflex-Blue-C');
}

// Output
.el {
    color: #001489;
}

$colors: #1abc9c #2ecc71 #3498db #9b59b6 #34495e #f1c40f #e67e22 #e74c3c #ecf0f1 #95a5a6;
$custom-stops: #1abc9c 10%, #2ecc71 12.5%, #3498db 28%, #9b59b6 35%, #34495e 60%, #f1c40f 69%, #e67e22 83%, #e74c3c 88%, #ecf0f1 96%, #95a5a6 100%;

 // Equal stops
 background: stripes($colors, $direction);

 // Random stops
 background: stripes($colors, 90deg, true); 

 // Custom stops
 background: stripes($custom-stops, 90deg);

// Usage
.foo {
    text-shadow: long-shadow(42deg, 1em, #16a085');
}

.bar {
    box-shadow: long-shadow(to top left, 150px, hotpink, tomato);
}

// Usage
.el {
    background-color: darken(#C6538C, 30%);
    background-color: shade(#C6538C, 30%);
}

// Output
.el {
   background-color: #602040;
   background-color: #8a3a62;
}

// SCSS
.tenue-shadow {
    color: #f0f;
    text-shadow: tenue-shadow(
                    $steps: 10,
                    $ratio: .03,
                    $op: .75,
                    $angle: -30deg,
                    $color: $color,
                    $bg: $bg
               );
} 

// CSS
.tenue-shadow {
    color: #f0f;
    text-shadow: -0.03em 0.02598em 0.4px rgba(229, 0, 229, 0.75), -0.045em 0.05196em 0.8px rgba(204, 0, 204, 0.75), -0.075em 0.07794em 1.2px rgba(178, 0, 178, 0.75), -0.09em 0.10392em 1.6px rgba(153, 0, 153, 0.75), -0.12em 0.1299em 2px rgba(127, 0, 127, 0.75), -0.135em 0.15588em 2.4px rgba(102, 0, 102, 0.75), -0.165em 0.18187em 3.4px rgba(76, 0, 76, 0.75), -0.18em 0.20785em 4.4px rgba(51, 0, 51, 0.75), -0.21em 0.23383em 5.4px rgba(25, 0, 25, 0.75), -0.225em 0.25981em 6.4px rgba(0, 0, 0, 0.75);
}

// Usage
.el {
    background-color: lighten(#C6538C, 30%);
    background-color: shade(#C6538C, 30%);
}

// Output
.el {
   background-color: #ecc6d9;
   background-color: #d786ae;
}

.el {
    @include fluid-prop(font-size, 16px, 20px);
}

.el {
    font-size: 16px;
    font-size: 1rem;
}

@media (min-width: 48em) {
    .el {
        font-size: calc(16px + 4 * (100vw - 48em) / 27);
        font-size: calc(1rem + 4 * (100vw - 48em) / 27);
    }
}

@media (min-width: 75em) {
    .el {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

// Usage
.el {
    @include ff("Helvetica");
}

// Output
.el {
	   font-family: Helvetica, Arial, sans-serif;
}

// Usage
.el {
    @include fs(16px);
}

// Output
.el {
	   font-size: 16px;
	   font-size: 1rem;
	   line-height: 1.5rem;
}

// SCSS
.el {
    @include hanging-indent(1.5em);
}

// CSS
.el {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

<figure class="filter-aden">
  <img src='...'>
</figure>

// SCSS
.el {
  @include ig-filter(aden);
}

// CSS
.el {
  position: relative;
  filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2);
}

.el:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: '';
  display: block;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
  mix-blend-mode: darken; 
}

<div class="loader01"></div>

.loader01 {
    @include loader('circle-cutout')
}

// CSS
  .loader01 { height: 56px; width: 56px; -webkit-animation: loader-rotate 1s linear infinite; animation: loader-rotate 1s linear infinite; border-radius: 50%; border-right-color: transparent; border: 8px solid #0052ec; position: relative; top: 50%; margin: -28px auto 0; }
  @-webkit-keyframes loader-rotate { from { -webkit-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
  @keyframes loader-rotate { from { -webkit-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
    
.loader01::after { top: -1px; left: 33px; position: absolute; height: 8px; width: 8px; content: ''; background: #0052ec; border-radius: 50%; }

// Usage
.selector {
    font-size: 1rem;
    
    @include mq("tablet") {
        font-size: 1.4rem;
    }
}

$tweakpoints: (
    "medium" : (screen and min-width: 20em)
)
.el {
    width: 50%;
    
    @include mq("medium", $tweakpoints) {
        width: 45%;
    }
}

// Output
 .selector {
     font-size: 1rem;
 }
 @media only screen and (min-width: 48em) {
     .selector {
          font-size: 1.4rem;
     }
 }
 
 .el {
    width: 50%;
 }
 @media only screen and (min-width: 20em) {
     .el {
          width: 45%;
     }
 }

// Usage
.el {
    @include absolute(top 5px left 50%);
}

// Output
.el {
    position: absolute;
    top: 5px;
    left: 50%;
}

// Usage
.el {
    @include relative(top 50% right 0 left 0);
}

// Output
.el {
    position: relative;
    top: 50%;
    right: 0;
    left: 0;
}

// Usage
.el {
    @include fixed(top 0 right 0 bottom 0 left 0)
}

// Output
.el {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

//  Usage
.el {
    @include rem(font-size, 1.6rem);
    @include rem(padding, 1rem .5rem)
}

// Output
.el {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 10px 5px;
    padding: 1rem .5rem;
}

// Usage
  @include scrollbar(5px, #333, #ccc);


// Output
::-webkit-scrollbar: {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

::-webkit-scrollbar-track {
    background: #ccc;
}

body {
  scrollbar-face-color: #333;
  scrollbar-track-color: #ccc;
}

// SCSS
.el {
  @include side-lines();
}

// CSS
.el {
  display: block;
  overflow: hidden;
  text-align: center;
}

.el:before,
.el:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 50%;
  border-top-style: solid
  border-top-width: 1px;
}
.el:before {
  right: .5em;
  margin-left: -50%;
}
.el:after {
  left: .5em;
  margin-right: -50%;
}

.first-element {
  @include size(2em);
}

// CSS Output
.first-element {
  width: 2em;
  height: 2em;
}

.second-element {
  @include size(auto, 10em);
}

// CSS Output
.second-element {
  width: auto;
  height: 10em;
}

@include sticky-footer(4em) { ... }

.el {
  @include strikethrough
}

// Usage
.el {
    @include svg-color(red);
}

// Output
.el {
    fill: red;
    stroke: red;
}

.foobar {
  background: #ff3377;
  @include theme(beccapurple){
    background: #663399;
  }
}

// Usage
.el {
    @include transition("border");
}

// Output
.el {
		transition: border 0.3s linear;
}

// Usage
.el {
    @include triangle(after, left, top 50% right -10px, #333, 12px);
}

// Output
.el {
    &:after {
      position: absolute;
      top: 50%;
      right: -10px;
      width: 0;
      height: 0;
      content: '';
      z-index: 2;
      border-right: 12px solid #333;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }
}

.el {
    @extend %video-holder;
}

<div class="video-holder [landscape || portrait]">
    <video></video>
    <iframe></iframe>
    <embed></embed>
</div>

// Usage
.el {
    padding-bottom: aspect-ratio(16 9);
    padding-bottom: aspect-ratio(4 3);
}

// Output
.el {
    padding-bottom: 56.25%;
    padding-bottom: 75%;
}

// Usage
 $base-lh : 1.5em;

.el {
    line-height: strip-units($base-lh);
}

// Output
.el {
    line-height: 1.5;
}