34 files changed, 291 insertions, 222 deletions
diff --git a/demo/src/less/settings/breakpoints.less b/demo/src/less/settings/breakpoints.less
deleted file mode 100644
index ed078e21..00000000
--- a/demo/src/less/settings/breakpoints.less
+++ /dev/null
@@ -1,9 +0,0 @@
-// ==========================================================================
-// Breakpoints
-// ==========================================================================
-
-@screen-sm: 480px;
-@screen-md: 768px;
-
-@mq-sm: ~'only screen and (min-width: @{screen-sm}) ';
-@mq-md: ~'only screen and (min-width: @{screen-md}) ';
diff --git a/demo/src/less/settings/colors.less b/demo/src/less/settings/colors.less
deleted file mode 100644
index 2f77fb14..00000000
--- a/demo/src/less/settings/colors.less
+++ /dev/null
@@ -1,27 +0,0 @@
-// ==========================================================================
-// Colors
-// ==========================================================================
-
-// Greyscale
-@gray-dark: #343f4a;
-@gray: #55646b;
-@gray-light: #cbd0d3;
-@gray-lighter: #dbe3e8;
-@off-white: #f2f5f7;
-
-// Text
-@color-text: #fff;
-
-// Plyr
-@color-brand-primary: #1aafff;
-
-// Brands
-@color-twitter: #4baaf4;
-@color-youtube: #cc181e;
-@color-vimeo: #19b7ed;
-
-// Elements
-@color-link: #fff;
-
-// Focus
-@tab-focus-default-color: #fff;
diff --git a/demo/src/less/settings/plyr.less b/demo/src/less/settings/plyr.less
deleted file mode 100644
index c39fd44b..00000000
--- a/demo/src/less/settings/plyr.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// ==========================================================================
-// Plyr Settings
-// ==========================================================================
-
-// Font
-@plyr-font-family: inherit;
-
-// Sizes
-@plyr-font-size-base: 13px;
-@plyr-font-size-small: 12px;
-@plyr-font-size-time: 11px;
-@plyr-font-size-badges: 9px;
-
-// Captions
-@plyr-font-size-captions-base: @plyr-font-size-base;
-@plyr-font-size-captions-small: @plyr-font-size-small;
-@plyr-font-size-captions-medium: 18px;
-@plyr-font-size-captions-large: 21px;
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
deleted file mode 100644
index dc6dbce1..00000000
--- a/demo/src/less/settings/type.less
+++ /dev/null
@@ -1,20 +0,0 @@
-// ==========================================================================
-// Typography
-// ==========================================================================
-
-@font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
-
-@font-size-base: 15;
-@font-size-small: 13;
-@font-size-large: 18;
-@font-size-h1: 64;
-
-@font-weight-light: 300;
-@font-weight-regular: 400;
-@font-weight-medium: 500;
-@font-weight-bold: 600;
-@font-weight-black: 900;
-
-@line-height-base: 1.75;
-
-@letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/bundles/demo.less b/demo/src/sass/bundles/demo.scss
index 61bb3cd9..dcddfe2a 100644
--- a/demo/src/less/bundles/demo.less
+++ b/demo/src/sass/bundles/demo.scss
@@ -3,12 +3,6 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-// Libs
-@import '../lib/fontface';
-@import '../lib/animation';
-@import '../lib/mixins';
-@import '../lib/normalize';
-
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';
@@ -19,6 +13,12 @@
 @import '../settings/spacing';
 @import '../settings/type';
 
+// Libs
+@import '../lib/fontface';
+@import '../lib/animation';
+@import '../lib/mixins';
+@import '../lib/normalize';
+
 // Layout
 @import '../layout/core';
 @import '../layout/grid';
@@ -37,5 +37,5 @@
 @import '../components/players';
 
 // Plyr
-@import '../../../../src/less/bundle';
 @import '../settings/plyr';
+@import '../../../../src/sass/bundle';
diff --git a/demo/src/less/bundles/error.less b/demo/src/sass/bundles/error.scss
index 67530689..67530689 100644
--- a/demo/src/less/bundles/error.less
+++ b/demo/src/sass/bundles/error.scss
diff --git a/demo/src/less/components/buttons.less b/demo/src/sass/components/buttons.scss
index a8a15682..db821ad3 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/sass/components/buttons.scss
@@ -5,30 +5,30 @@
 // Shared
 .button,
 .button__count {
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
     align-items: center;
-    padding: (@spacing-base * 0.75);
-    border-radius: @border-radius-base;
-    box-shadow: 0 1px 1px fade(#000, 10%);
     background: #fff;
     border: 0;
-    user-select: none;
+    border-radius: $border-radius-base;
+    box-shadow: 0 1px 1px rgba(#000, 0.1);
+    color: $gray;
+    display: inline-flex;
+    padding: ($spacing-base * 0.75);
+    position: relative;
     text-shadow: none;
-    color: @gray;
+    user-select: none;
+    vertical-align: middle;
 }
 
 // Buttons
 .button {
-    padding-left: @spacing-base;
-    padding-right: @spacing-base;
+    font-weight: $font-weight-bold;
+    padding-left: $spacing-base;
+    padding-right: $spacing-base;
     transition: all 0.2s ease;
-    font-weight: @font-weight-bold;
 
     &:hover,
     &:focus {
-        color: @gray-dark;
+        color: $gray-dark;
 
         // Remove the underline/border
         &::after {
@@ -37,8 +37,8 @@
     }
 
     &:hover {
+        box-shadow: 0 2px 2px rgba(#000, 0.1);
         transform: translateY(-1px);
-        box-shadow: 0 2px 2px fade(#000, 10%);
     }
 
     &:focus {
@@ -46,7 +46,7 @@
     }
 
     &.tab-focus {
-        .tab-focus();
+        @include tab-focus();
     }
 
     &:active {
@@ -65,19 +65,19 @@
 
 // Count bubble
 .button__count {
-    margin-left: (@spacing-base / 2);
     animation: fadein 0.2s ease;
+    margin-left: ($spacing-base / 2);
 
     &::before {
+        border: $arrow-size solid transparent;
+        border-left-width: 0;
+        border-right-color: #fff;
         content: '';
-        position: absolute;
-        width: 0;
         height: 0;
+        position: absolute;
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
-        border: @arrow-size solid transparent;
-        border-right-color: #fff;
-        border-left-width: 0;
+        width: 0;
     }
 }
diff --git a/demo/src/less/components/header.less b/demo/src/sass/components/header.scss
index fc7bf63a..eab2214e 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/sass/components/header.scss
@@ -3,17 +3,17 @@
 // ==========================================================================
 
 header {
-    padding-bottom: @spacing-base;
+    padding-bottom: $spacing-base;
     text-align: center;
 
     .call-to-action {
-        margin-top: (@spacing-base * 1.5);
+        margin-top: ($spacing-base * 1.5);
     }
 
-    @media @mq-md {
+    @media only screen and (min-width: $screen-md) {
+        margin-right: ($spacing-base * 3);
         max-width: 360px;
-        margin-right: (@spacing-base * 3);
-        padding-bottom: (@spacing-base * 2);
+        padding-bottom: ($spacing-base * 2);
         text-align: left;
     }
 }
diff --git a/demo/src/less/components/icons.less b/demo/src/sass/components/icons.scss
index 92b0567e..b2b353a6 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/sass/components/icons.scss
@@ -5,9 +5,9 @@
 // Base size icon styles
 .icon {
     fill: currentColor;
-    width: @icon-size;
-    height: @icon-size;
+    height: $icon-size;
     vertical-align: -3px;
+    width: $icon-size;
 }
 
 // Within elements
@@ -19,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: floor(@spacing-base / 3);
+    margin-right: floor($spacing-base / 3);
 }
diff --git a/demo/src/less/components/links.less b/demo/src/sass/components/links.scss
index 7a62ab40..25780b41 100644
--- a/demo/src/less/components/links.less
+++ b/demo/src/sass/components/links.scss
@@ -4,30 +4,29 @@
 
 // Make a <button> look like an <a>
 button.faux-link {
-    .cancel-button-styles();
-
-    &:extend(a all);
+    @extend a; // stylelint-disable-line
+    @include cancel-button-styles();
 }
 
 // Links
 a {
-    position: relative;
     border-bottom: 1px dotted currentColor;
-    transition: all 0.2s ease;
+    color: $color-link;
+    font-weight: $font-weight-bold;
+    position: relative;
     text-decoration: none;
-    color: @color-link;
-    font-weight: @font-weight-bold;
+    transition: all 0.2s ease;
 
     &::after {
+        background: currentColor;
         content: '';
+        height: 1px;
+        left: 50%;
         position: absolute;
         top: 100%;
-        left: 50%;
         transform: translateX(-50%);
-        width: 0;
-        height: 1px;
         transition: width 0.2s ease;
-        background: currentColor;
+        width: 0;
     }
 
     &:hover,
@@ -41,6 +40,6 @@ a {
     }
 
     &.tab-focus {
-        .tab-focus();
+        @include tab-focus();
     }
 }
diff --git a/demo/src/less/components/lists.less b/demo/src/sass/components/lists.scss
index bae3d11d..bae3d11d 100644
--- a/demo/src/less/components/lists.less
+++ b/demo/src/sass/components/lists.scss
diff --git a/demo/src/less/components/navigation.less b/demo/src/sass/components/navigation.scss
index 0b80f7e8..fe14c000 100644
--- a/demo/src/less/components/navigation.less
+++ b/demo/src/sass/components/navigation.scss
@@ -5,5 +5,5 @@
 nav {
     display: flex;
     justify-content: center;
-    margin-bottom: @spacing-base;
+    margin-bottom: $spacing-base;
 }
diff --git a/demo/src/less/components/players.less b/demo/src/sass/components/players.scss
index 19ffd7df..90e2bc94 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/sass/components/players.scss
@@ -10,9 +10,9 @@ video {
 
 // Example players
 .plyr {
-    margin: @spacing-base auto;
-    border-radius: @border-radius-base;
-    box-shadow: 0 2px 5px fade(#000, 20%);
+    border-radius: $border-radius-base;
+    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    margin: $spacing-base auto;
 
     &.plyr--audio {
         max-width: 480px;
@@ -20,24 +20,24 @@ video {
 }
 
 .plyr__video-wrapper::after {
+    border: 1px solid rgba(#000, 0.15);
+    border-radius: inherit;
+    bottom: 0;
     content: '';
+    left: 0;
     pointer-events: none;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
     right: 0;
-    border: 1px solid fade(#000, 15%);
-    border-radius: inherit;
+    top: 0;
 }
 
 // Style full supported player
 .plyr__cite {
     display: none;
-    margin-top: @spacing-base;
+    margin-top: $spacing-base;
 
     .icon {
-        margin-right: ceil(@spacing-base / 6);
+        margin-right: ceil($spacing-base / 6);
     }
 }
 
diff --git a/demo/src/less/layout/core.less b/demo/src/sass/layout/core.scss
index 08352e3d..c4d9a445 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/sass/layout/core.scss
@@ -2,12 +2,6 @@
 // Core
 // ==========================================================================
 
-*,
-*::after,
-*::before {
-    box-sizing: border-box;
-}
-
 html,
 body {
     display: flex;
@@ -15,16 +9,16 @@ body {
 }
 
 html {
-    background: @page-background;
+    background: $page-background;
     background-attachment: fixed;
     height: 100%;
 }
 
 body {
-    display: flex;
-    min-height: 100%;
     align-items: center;
+    display: flex;
     flex-direction: column;
+    min-height: 100%;
 }
 
 .grid {
@@ -38,21 +32,21 @@ main {
 }
 
 aside {
-    position: relative;
+    align-items: center;
+    background: #fff;
+    color: $gray;
     display: flex;
     flex-shrink: 0;
-    align-items: center;
     justify-content: center;
-    width: 100%;
-    padding: (@spacing-base * 0.75);
-    background: #fff;
+    padding: ($spacing-base * 0.75);
+    position: relative;
     text-align: center;
-    color: @gray;
     text-shadow: none;
+    width: 100%;
 
     .icon {
-        margin-right: (@spacing-base / 2);
-        fill: @color-twitter;
+        fill: $color-twitter;
+        margin-right: ($spacing-base / 2);
     }
 
     p {
@@ -60,10 +54,10 @@ aside {
     }
 
     a {
-        color: @color-twitter;
+        color: $color-twitter;
 
         &.tab-focus {
-            .tab-focus(@color-twitter);
+            @include tab-focus($color-twitter);
         }
     }
 }
diff --git a/demo/src/less/layout/error.less b/demo/src/sass/layout/error.scss
index aebe8dca..385ecbf3 100644
--- a/demo/src/less/layout/error.less
+++ b/demo/src/sass/layout/error.scss
@@ -9,22 +9,22 @@ html.error,
 }
 
 html.error {
-    background: @page-background;
+    background: $page-background;
     background-attachment: fixed;
 }
 
 .error body {
-    width: 100%;
-    display: flex;
     align-items: center;
+    display: flex;
+    width: 100%;
 }
 
 .error main {
-    width: 100%;
-    padding: @spacing-base;
+    padding: $spacing-base;
     text-align: center;
+    width: 100%;
 
     p {
-        .font-size(@font-size-large);
+        @include font-size($font-size-large);
     }
 }
diff --git a/demo/src/less/layout/grid.less b/demo/src/sass/layout/grid.scss
index 02ff28c8..40dd829e 100644
--- a/demo/src/less/layout/grid.less
+++ b/demo/src/sass/layout/grid.scss
@@ -4,13 +4,13 @@
 
 .grid {
     margin: 0 auto;
-    padding: @spacing-base;
+    padding: $spacing-base;
 
-    @media @mq-md {
-        display: flex;
+    @media only screen and (min-width: $screen-md) {
         align-items: center;
+        display: flex;
+        max-width: $container-max-width;
         width: 100%;
-        max-width: @container-max-width;
 
         > * {
             flex: 1;
diff --git a/demo/src/less/lib/animation.less b/demo/src/sass/lib/animation.scss
index c8c05548..3c14b0a7 100644
--- a/demo/src/less/lib/animation.less
+++ b/demo/src/sass/lib/animation.scss
@@ -7,7 +7,6 @@
     0% {
         opacity: 0;
     }
-
     100% {
         opacity: 1;
     }
diff --git a/demo/src/sass/lib/decimal.scss b/demo/src/sass/lib/decimal.scss
new file mode 100644
index 00000000..8cb41718
--- /dev/null
+++ b/demo/src/sass/lib/decimal.scss
@@ -0,0 +1,79 @@
+// _decimal.scss | MIT License | gist.github.com/terkel/4373420
+
+// Round a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @param  {String} [$mode:round] (round|ceil|floor) How to round a number
+// @return {Number} A rounded number
+// @example
+//     decimal-round(0.333)    => 0
+//     decimal-round(0.333, 1) => 0.3
+//     decimal-round(0.333, 2) => 0.33
+//     decimal-round(0.666)    => 1
+//     decimal-round(0.666, 1) => 0.7
+//     decimal-round(0.666, 2) => 0.67
+//
+@function decimal-round ($number, $digits: 0, $mode: round) {
+    $n: 1;
+    // $number must be a number
+    @if type-of($number) != number {
+        @warn '#{ $number } is not a number.';
+        @return $number;
+    }
+    // $digits must be a unitless number
+    @if type-of($digits) != number {
+        @warn '#{ $digits } is not a number.';
+        @return $number;
+    } @else if not unitless($digits) {
+        @warn '#{ $digits } has a unit.';
+        @return $number;
+    }
+    @for $i from 1 through $digits {
+        $n: $n * 10;
+    }
+    @if $mode == round {
+        @return round($number * $n) / $n;
+    } @else if $mode == ceil {
+        @return ceil($number * $n) / $n;
+    } @else if $mode == floor {
+        @return floor($number * $n) / $n;
+    } @else {
+        @warn '#{ $mode } is undefined keyword.';
+        @return $number;
+    }
+}
+
+// Ceil a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A ceiled number
+// @example
+//     decimal-ceil(0.333)    => 1
+//     decimal-ceil(0.333, 1) => 0.4
+//     decimal-ceil(0.333, 2) => 0.34
+//     decimal-ceil(0.666)    => 1
+//     decimal-ceil(0.666, 1) => 0.7
+//     decimal-ceil(0.666, 2) => 0.67
+//
+@function decimal-ceil ($number, $digits: 0) {
+    @return decimal-round($number, $digits, ceil);
+}
+
+// Floor a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A floored number
+// @example
+//     decimal-floor(0.333)    => 0
+//     decimal-floor(0.333, 1) => 0.3
+//     decimal-floor(0.333, 2) => 0.33
+//     decimal-floor(0.666)    => 0
+//     decimal-floor(0.666, 1) => 0.6
+//     decimal-floor(0.666, 2) => 0.66
+//
+@function decimal-floor ($number, $digits: 0) {
+    @return decimal-round($number, $digits, floor);
+}
diff --git a/demo/src/less/lib/fontface.less b/demo/src/sass/lib/fontface.scss
index 88ec49a5..e7e4edf8 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/sass/lib/fontface.scss
@@ -3,43 +3,43 @@
 // ==========================================================================
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
-    font-weight: @font-weight-light;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-light;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-regular;
     src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
-    font-weight: @font-weight-regular;
-    font-style: normal;
-    font-display: swap;
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-medium;
     src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
-    font-weight: @font-weight-medium;
-    font-style: normal;
-    font-display: swap;
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
-    font-weight: @font-weight-bold;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-bold;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
-    font-weight: @font-weight-black;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-black;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }
diff --git a/demo/src/less/lib/mixins.less b/demo/src/sass/lib/mixins.scss
index 821d2b3e..ef155b46 100644
--- a/demo/src/less/lib/mixins.less
+++ b/demo/src/sass/lib/mixins.scss
@@ -4,47 +4,48 @@
 
 // Convert a <button> into an <a>
 // ---------------------------------------
-.cancel-button-styles() {
-    position: relative;
+@mixin cancel-button-styles() {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    font: inherit;
+    line-height: $line-height-base;
     margin: 0;
     padding: 0;
-    width: auto;
-    border: 0;
-    background: transparent;
-    vertical-align: baseline;
+    position: relative;
     text-align: inherit;
-    font: inherit;
-    line-height: @line-height-base;
-    cursor: pointer;
-    -moz-user-select: text;
     text-shadow: inherit;
-    border-radius: 0;
+    -moz-user-select: text; // stylelint-disable-line
+    vertical-align: baseline;
+    width: auto;
 }
 
 // Nicer focus styles
 // ---------------------------------------
-.tab-focus(@color: @tab-focus-default-color) {
+@mixin tab-focus($color: $tab-focus-default-color) {
+    box-shadow: 0 0 0 3px rgba($color, 0.35);
     outline: 0;
-    box-shadow: 0 0 0 3px fade(@color, 35%);
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
-.font-size(@font-size: 16) {
-    @rem: round((@font-size / 16), 3);
+@mixin font-size($font-size: 16) {
+    $rem: decimal-round(($font-size / 16), 3);
 
-    font-size: (@font-size * 1px);
-    font-size: ~'@{rem}rem';
+    font-size: ($font-size * 1px);
+    font-size: '#{$rem}rem';
 }
 
 // Font smoothing
 // ---------------------------------------
-.font-smoothing(@mode: on) when (@mode = on) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-.font-smoothing(@mode: on) when (@mode = off) {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
+@mixin font-smoothing($enabled: true) {
+    @if $enabled {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    } @else {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
 }
diff --git a/demo/src/less/lib/normalize.less b/demo/src/sass/lib/normalize.scss
index 34743e73..34743e73 100644
--- a/demo/src/less/lib/normalize.less
+++ b/demo/src/sass/lib/normalize.scss
diff --git a/demo/src/less/lib/reset.less b/demo/src/sass/lib/reset.scss
index 50798b10..50798b10 100644
--- a/demo/src/less/lib/reset.less
+++ b/demo/src/sass/lib/reset.scss
diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss
new file mode 100644
index 00000000..65940ad6
--- /dev/null
+++ b/demo/src/sass/settings/breakpoints.scss
@@ -0,0 +1,6 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+$screen-sm: 480px;
+$screen-md: 768px;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
new file mode 100644
index 00000000..aa1c96ee
--- /dev/null
+++ b/demo/src/sass/settings/colors.scss
@@ -0,0 +1,27 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+// Greyscale
+$gray-dark: #343f4a;
+$gray: #55646b;
+$gray-light: #cbd0d3;
+$gray-lighter: #dbe3e8;
+$off-white: #f2f5f7;
+
+// Text
+$color-text: #fff;
+
+// Plyr
+$color-brand-primary: #1aafff;
+
+// Brands
+$color-twitter: #4baaf4;
+$color-youtube: #cc181e;
+$color-vimeo: #19b7ed;
+
+// Elements
+$color-link: #fff;
+
+// Focus
+$tab-focus-default-color: #fff;
diff --git a/demo/src/less/settings/cosmetic.less b/demo/src/sass/settings/cosmetic.scss
index 0024a446..dee536e5 100644
--- a/demo/src/less/settings/cosmetic.less
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -3,10 +3,10 @@
 // ==========================================================================
 
 // Button count arrow size
-@arrow-size: 5px;
+$arrow-size: 5px;
 
 // Radii
-@border-radius-base: 4px;
+$border-radius-base: 4px;
 
 // Background
-@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 10%), darken(@color-brand-primary, 20%));
+$page-background: linear-gradient(to left top, lighten($color-brand-primary, 10%), darken($color-brand-primary, 20%));
diff --git a/demo/src/less/settings/icons.less b/demo/src/sass/settings/icons.scss
index 546607c7..ad16a645 100644
--- a/demo/src/less/settings/icons.less
+++ b/demo/src/sass/settings/icons.scss
@@ -2,4 +2,4 @@
 // Icons
 // ==========================================================================
 
-@icon-size: 16px;
+$icon-size: 16px;
diff --git a/demo/src/less/settings/layout.less b/demo/src/sass/settings/layout.scss
index 810edc03..8d1fbd28 100644
--- a/demo/src/less/settings/layout.less
+++ b/demo/src/sass/settings/layout.scss
@@ -2,4 +2,4 @@
 // Layout
 // ==========================================================================
 
-@container-max-width: 1280px;
+$container-max-width: 1280px;
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
new file mode 100644
index 00000000..3d30ce71
--- /dev/null
+++ b/demo/src/sass/settings/plyr.scss
@@ -0,0 +1,18 @@
+// ==========================================================================
+// Plyr Settings
+// ==========================================================================
+
+// Font
+$plyr-font-family: inherit;
+
+// Sizes
+$plyr-font-size-base: 13px;
+$plyr-font-size-small: 12px;
+$plyr-font-size-time: 11px;
+$plyr-font-size-badges: 9px;
+
+// Captions
+$plyr-font-size-captions-base: $plyr-font-size-base;
+$plyr-font-size-captions-small: $plyr-font-size-small;
+$plyr-font-size-captions-medium: 18px;
+$plyr-font-size-captions-large: 21px;
diff --git a/demo/src/less/settings/spacing.less b/demo/src/sass/settings/spacing.scss
index 6bd14f58..a19b0a95 100644
--- a/demo/src/less/settings/spacing.less
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
 // Colors
 // ==========================================================================
 
-@spacing-base: 20px;
+$spacing-base: 20px;
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
new file mode 100644
index 00000000..e8f0b2c8
--- /dev/null
+++ b/demo/src/sass/settings/type.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+
+$font-size-base: 15;
+$font-size-small: 13;
+$font-size-large: 18;
+$font-size-h1: 64;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 900;
+
+$line-height-base: 1.75;
+
+$letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/type/base.less b/demo/src/sass/type/base.scss
index 70eddcb4..452298bd 100644
--- a/demo/src/less/type/base.less
+++ b/demo/src/sass/type/base.scss
@@ -8,13 +8,13 @@ html {
 }
 
 body {
-    font-family: @font-sans-serif;
-    line-height: @line-height-base;
-    color: @color-text;
-    font-weight: @font-weight-medium;
-    text-shadow: 0 1px 1px fade(#000, 15%);
-    .font-smoothing();
-    .font-size(@font-size-base);
+    @include font-smoothing();
+    @include font-size($font-size-base);
+    color: $color-text;
+    font-family: $font-sans-serif;
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+    text-shadow: 0 1px 1px rgba(#000, 0.15);
 }
 
 button,
@@ -26,10 +26,10 @@ textarea {
 
 p,
 small {
-    margin: 0 0 @spacing-base;
+    margin: 0 0 $spacing-base;
 }
 
 small {
+    @include font-size($font-size-small);
     display: block;
-    .font-size(@font-size-small);
 }
diff --git a/demo/src/less/type/headings.less b/demo/src/sass/type/headings.scss
index 5e46bf34..c2abc97e 100644
--- a/demo/src/less/type/headings.less
+++ b/demo/src/sass/type/headings.scss
@@ -3,8 +3,8 @@
 // ==========================================================================
 
 h1 {
-    margin: 0 0 (@spacing-base / 2);
-    font-weight: @font-weight-bold;
-    letter-spacing: @letter-spacing-headings;
-    .font-size(@font-size-h1);
+    @include font-size($font-size-h1);
+    font-weight: $font-weight-bold;
+    letter-spacing: $letter-spacing-headings;
+    margin: 0 0 ($spacing-base / 2);
 }
diff --git a/demo/src/less/utilities/color.less b/demo/src/sass/utilities/color.scss
index 8d6b1c4f..786e6ccb 100644
--- a/demo/src/less/utilities/color.less
+++ b/demo/src/sass/utilities/color.scss
@@ -3,9 +3,9 @@
 // ==========================================================================
 
 .color--vimeo {
-    color: @color-vimeo;
+    color: $color-vimeo;
 }
 
 .color--youtube {
-    color: @color-youtube;
+    color: $color-youtube;
 }
diff --git a/demo/src/less/utilities/hidden.less b/demo/src/sass/utilities/hidden.scss
index a48b107a..a48b107a 100644
--- a/demo/src/less/utilities/hidden.less
+++ b/demo/src/sass/utilities/hidden.scss