diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4c15aa9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea/
+.sass-cache/
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..98bcbaa
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Dmitry Artemov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8711aa8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# SCSS mixins
+
+## Usage
+
+1. `git clone https://github.com/beliarh/scss-mixins.git`
+2. `@import 'scss-mixins/all';`
+
+## Required Sass version
+
+Sass 3.4.0+
\ No newline at end of file
diff --git a/_all.scss b/_all.scss
new file mode 100644
index 0000000..61cecc5
--- /dev/null
+++ b/_all.scss
@@ -0,0 +1,24 @@
+@import "mixins/align";
+@import "mixins/animation";
+@import "mixins/backface";
+@import "mixins/background";
+@import "mixins/border";
+@import "mixins/box";
+@import "mixins/clearfix";
+@import "mixins/column";
+@import "mixins/filter";
+@import "mixins/flex";
+@import "mixins/fullscreen";
+@import "mixins/gradient";
+@import "mixins/justify";
+@import "mixins/keyframes";
+@import "mixins/order";
+@import "mixins/perspective";
+@import "mixins/placeholder";
+@import "mixins/reset";
+@import "mixins/selection";
+@import "mixins/tab";
+@import "mixins/transform";
+@import "mixins/transition";
+@import "mixins/triangle";
+@import "mixins/user";
\ No newline at end of file
diff --git a/functions/_base-functions.scss b/functions/_base-functions.scss
new file mode 100644
index 0000000..b034fde
--- /dev/null
+++ b/functions/_base-functions.scss
@@ -0,0 +1,120 @@
+@function is-string($value) {
+    @return type-of($value) == string;
+}
+
+@function is-number($value) {
+    @return type-of($value) == number;
+}
+
+@function is-color($value) {
+    @return type-of($value) == color or (is-string($value) and to-lower-case($value) == currentcolor);
+}
+
+@function is-list($value) {
+    @return type-of($value) == list;
+}
+
+@function is-arglist($value) {
+    @return type-of($value) == arglist;
+}
+
+@function is-list-like($value) {
+    @return is-list($value) or is-arglist($value);
+}
+
+@function is-comma-separated($value) {
+    @return list-separator($value) == comma;
+}
+
+@function is-space-separated($value) {
+    @return list-separator($value) == space;
+}
+
+@function is-comma-list($value) {
+    @return is-list($value) and is-comma-separated($value);
+}
+
+@function is-space-list($value) {
+    @return is-list($value) and is-space-separated($value);
+}
+
+@function is-map($value) {
+    @return type-of($value) == map;
+}
+
+@function is-percentage($value) {
+    @return is-number($value) and unit($value) == '%';
+}
+
+@function is-length($value) {
+    @return is-number($value) and not not index(em ex ch rem vh vw vmin vmax px mm cm in pt pc, unit($value));
+}
+
+@function is-angle($value) {
+    @if is-number($value) and index(deg grad rad turn, unit($value)) {
+        @return true;
+    }
+    @return false;
+}
+
+@function is-width($value) {
+    @return $value == auto or is-length($value) or is-percentage($value);
+}
+
+@function is-side-or-corner($value) {
+    @if is-space-separated($value) {
+        $length: length($value);
+        $arg1: nth($value, 1);
+        @if $length == 1 {
+            @return not not index(left right top bottom, $arg1);
+        }
+        @if $length == 2 {
+            @if index(left right, $arg1) {
+                @return not not index(top bottom, nth($value, 2));
+            }
+            @if index(top bottom, $arg1) {
+                @return not not index(left right, nth($value, 2));
+            }
+        }
+    }
+    @return false;
+}
+
+@function is-extent-keyword($value) {
+    @return not not index(closest-corner closest-side farthest-corner farthest-side, $value);
+}
+
+@function is-time($value) {
+    @return is-number($value) and not not index(ms s, unit($value));
+}
+
+@function is-timing-function($value) {
+    @if is-string($value) {
+        @if index(ease linear ease-in ease-out ease-in-out step-start step-end, $value) {
+            @return true;
+        }
+        @if str-slice($value, 1, 6) == 'steps(' and str-slice($value, -1) == ')' {
+            @return true;
+        }
+        @if str-slice($value, 1, 13) == 'cubic-bezier(' and str-slice($value, -1) == ')' {
+            @return true;
+        }
+    }
+    @return false;
+}
+
+@function slice-list($list, $from: 1, $to: length($list)) {
+    $slice: join((), (), list-separator($list));
+    @for $i from $from through $to {
+        $slice: append($slice, nth($list, $i));
+    }
+    @return $slice;
+}
+
+@function unwrap-list($list, $arglist-only: false) {
+    $list-types: if($arglist-only, arglist, list arglist);
+    @while index($list-types, type-of($list)) and length($list) == 1 {
+        $list: nth($list, 1);
+    }
+    @return $list;
+}
\ No newline at end of file
diff --git a/functions/_helpers.scss b/functions/_helpers.scss
new file mode 100644
index 0000000..b5910ab
--- /dev/null
+++ b/functions/_helpers.scss
@@ -0,0 +1,147 @@
+@import "base-functions";
+
+@function __angle-to-webkit-gradient-direction($angle) {
+    $angle: $angle % 360deg;
+    $one-sixteenth: 360deg / 16;
+    @if $angle >= $one-sixteenth * 15 or  $angle < $one-sixteenth *  1 {
+        @return (center bottom, center top);
+    }
+    @if $angle >= $one-sixteenth *  1 and $angle < $one-sixteenth *  3 {
+        @return (left bottom, right top);
+    }
+    @if $angle >= $one-sixteenth *  3 and $angle < $one-sixteenth *  5 {
+        @return (left center, right center);
+    }
+    @if $angle >= $one-sixteenth *  5 and $angle < $one-sixteenth *  7 {
+        @return (left top, right bottom);
+    }
+    @if $angle >= $one-sixteenth *  7 and $angle < $one-sixteenth *  9 {
+        @return (center top, center bottom);
+    }
+    @if $angle >= $one-sixteenth *  9 and $angle < $one-sixteenth * 11 {
+        @return (right top, left bottom);
+    }
+    @if $angle >= $one-sixteenth * 11 and $angle < $one-sixteenth * 13 {
+        @return (right center, left center);
+    }
+    @if $angle >= $one-sixteenth * 13 and $angle < $one-sixteenth * 15 {
+        @return (right bottom, left top);
+    }
+}
+
+@function __parsed-color-stops-to-list($parsed-color-stops) {
+    $color-stops: ();
+    @each $parsed-color-stop in $parsed-color-stops {
+        $color: map-get($parsed-color-stop, 'color');
+        $position: map-get($parsed-color-stop, 'position');
+        $color-stop: if($position, $color $position, $color);
+        $color-stops: append($color-stops, $color-stop, comma);
+    }
+    @return $color-stops;
+}
+
+@function __parsed-color-stops-to-webkit-color-stops($parsed-color-stops) {
+    $length: length($parsed-color-stops);
+    @if $length < 2 {
+        @return null;
+    }
+    $color-stops: ();
+    $color-stop-maps: ();
+    $colors-buffer: ();
+    @for $i from 1 through $length {
+        $parsed-color-stop: nth($parsed-color-stops, $i);
+        $color: map-get($parsed-color-stop, 'color');
+        $position: map-get($parsed-color-stop, 'position');
+        @if $position == null {
+            @if $i == 1 {
+                $position: 0%;
+            } @else if $i == $length {
+                $position: 100%;
+            }
+        }
+        @if ($i == $length or is-percentage($position)) and length($colors-buffer) > 0 {
+            $last-index: length($color-stop-maps);
+            $last-color-stop: nth($color-stop-maps, $last-index);
+            $last-position: map-get($last-color-stop, 'position');
+            $increment: ($position - $last-position) / ($i - $last-index);
+            @each $buffered-color in $colors-buffer {
+                $last-position: $last-position + $increment;
+                $color-stop: unquote('color-stop(#{$last-position}, #{$buffered-color})');
+                $color-stops: append($color-stops, $color-stop, comma);
+                $color-stop-map: ('color': $buffered-color, 'position': $last-position);
+                $color-stop-maps: append($color-stop-maps, $color-stop-map);
+            }
+            $colors-buffer: ();
+        }
+        @if $position == null {
+            $colors-buffer: append($colors-buffer, $color);
+        } @else if is-percentage($position) {
+            $color-stop: unquote('color-stop(#{$position}, #{$color})');
+            $color-stops: append($color-stops, $color-stop, comma);
+            $color-stop-map: ('color': $color, 'position': $position);
+            $color-stop-maps: append($color-stop-maps, $color-stop-map);
+        } @else {
+            @return null;
+        }
+    }
+    @return $color-stops;
+}
+
+@function __prefix-transition-properties($properties...) {
+    $properties: unwrap-list($properties);
+    $webkit-properties: ();
+    $moz-properties: ();
+    $o-properties: ();
+    @each $property in $properties {
+        $webkit-property: $property;
+        $moz-property: $property;
+        $o-property: $property;
+        $prefixes: map-get((
+            'transform': -webkit -moz -o,
+            'transform-origin': -webkit -moz -o,
+            'perspective': -webkit -moz,
+            'perspective-origin': -webkit -moz,
+            'column-width': -webkit -moz,
+            'column-count': -webkit -moz,
+            'column-gap': -webkit -moz,
+            'column-rule': -webkit -moz,
+            'column-rule-color': -webkit -moz,
+            'column-rule-width': -webkit -moz,
+            'flex': -webkit,
+            'flex-basis': -webkit,
+            'background-size': -webkit -moz -o,
+            'border-radius': -webkit -moz,
+            'box-shadow': -webkit -moz,
+        ), $property);
+        @if $prefixes {
+            @if index($prefixes, -webkit) {
+                $webkit-property: -webkit-#{$property};
+            }
+            @if index($prefixes, -moz) {
+                $moz-property: -moz-#{$property};
+            }
+            @if index($prefixes, -o) {
+                $o-property: -o-#{$property};
+            }
+        } @else {
+            $moz-single-border-radius: map-get((
+                'border-top-left-radius': -moz-border-radius-topleft,
+                'border-top-right-radius': -moz-border-radius-topright,
+                'border-bottom-left-radius': -moz-border-radius-bottomleft,
+                'border-bottom-right-radius': -moz-border-radius-bottomright,
+            ), $property);
+            @if $moz-single-border-radius {
+                $webkit-property: -webkit-#{$property};
+                $moz-property: $moz-single-border-radius;
+            }
+        }
+        $webkit-properties: append($webkit-properties, $webkit-property, comma);
+        $moz-properties: append($moz-properties, $moz-property, comma);
+        $o-properties: append($o-properties, $o-property, comma);
+    }
+    @return (
+        '-webkit': $webkit-properties,
+        '-moz': $moz-properties,
+        '-o': $o-properties,
+    );
+}
\ No newline at end of file
diff --git a/functions/_parse-background-position.scss b/functions/_parse-background-position.scss
new file mode 100644
index 0000000..de7a3b7
--- /dev/null
+++ b/functions/_parse-background-position.scss
@@ -0,0 +1,49 @@
+@import "base-functions";
+
+@function __parse-background-position($background-position) {
+    @if is-comma-separated($background-position) {
+        // <COMMA-LIST>
+        @return null;
+    }
+    $length: length($background-position);
+    @if not ($length >= 1 and $length <= 2) {
+        // Incorrect arguments count
+        @return null;
+    }
+    $arg1: unquote(nth($background-position, 1));
+    @if is-length($arg1) or is-percentage($arg1) or index(left center right, $arg1) {
+        // [<length> | <percentage> | left | center | right] ...
+        @if $length == 1 {
+            // [<length> | <percentage> | left | center | right]
+            @return ('x': $arg1, 'y': center);
+        }
+        $arg2: unquote(nth($background-position, 2));
+        @if is-length($arg2) or is-percentage($arg2) or index(top center bottom, $arg2) {
+            // [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom]
+            @return ('x': $arg1, 'y': $arg2);
+        } @else if $arg1 == center and index(left right, $arg2) {
+            // center [left | right]
+            @return ('x': $arg2, 'y': $arg1);
+        } @else {
+            // [<length> | <percentage> | left | center | right] <UNEXPECTED-VALUE>
+            @return null;
+        }
+    } @else if index(top center bottom, $arg1) {
+        // [top | center | bottom] ...
+        @if $length == 1 {
+            // [top | center | bottom]
+            @return ('x': center, 'y': $arg1);
+        }
+        $arg2: unquote(nth($background-position, 2));
+        @if index(left center right, $arg2) {
+            // [top | center | bottom] [left | center | right]
+            @return ('x': $arg2, 'y': $arg1);
+        } @else {
+            // [top | center | bottom] <UNEXPECTED-VALUE>
+            @return null;
+        }
+    } @else {
+        // <UNEXPECTED-VALUE>
+        @return null;
+    }
+}
\ No newline at end of file
diff --git a/functions/_parse-color-stop.scss b/functions/_parse-color-stop.scss
new file mode 100644
index 0000000..a0ff7ef
--- /dev/null
+++ b/functions/_parse-color-stop.scss
@@ -0,0 +1,43 @@
+@import "base-functions";
+
+@function __parse-color-stop($color-stop) {
+    @if is-comma-separated($color-stop) {
+        // <COMMA-LIST>
+        @return null;
+    }
+    $length: length($color-stop);
+    @if not ($length >= 1 and $length <= 2) {
+        // Incorrect arguments count.
+        @return null;
+    }
+    $arg1: unquote(nth($color-stop, 1));
+    @if not is-color($arg1) {
+        // <UNEXPECTED-VALUE> ...
+        @return null;
+    }
+    // <color> ...
+    @if $length == 1 {
+        // <color>
+        @return (
+            'color': $arg1,
+            'position': null
+        );
+    }
+    $arg2: nth($color-stop, 2);
+    @if is-length($arg2) or is-percentage($arg2) {
+        // <color> [<length> | <percentage>]
+        @return (
+            'color': $arg1,
+            'position': $arg2
+        );
+    } @else if is-number($arg2) and unitless($arg2) {
+        // <color> <number>
+        @return (
+            'color': $arg1,
+            'position': $arg2 * 1px
+        );
+    } @else {
+        // <color> <UNEXPECTED-VALUE>
+        @return null;
+    }
+}
\ No newline at end of file
diff --git a/functions/_parse-flex.scss b/functions/_parse-flex.scss
new file mode 100644
index 0000000..ca62929
--- /dev/null
+++ b/functions/_parse-flex.scss
@@ -0,0 +1,110 @@
+@import "base-functions";
+
+@function __parse-flex($flex) {
+    @if is-comma-separated($flex) {
+        // <COMMA-LIST>
+        @return null;
+    }
+    $length: length($flex);
+    @if not ($length >= 1 and $length <= 3) {
+        // Incorrect arguments count.
+        @return null;
+    }
+    $arg1: nth($flex, 1);
+    @if $arg1 == none {
+        // none ...
+        @if $length == 1 {
+            // none
+            @return none;
+        }
+        // none <UNEXPECTED-VALUE>
+        @return null;
+    }
+    @if is-number($arg1) and unitless($arg1) {
+        // <number> ...
+        @if $length == 1 {
+            // <number>
+            @return (
+                'grow': $arg1,
+                'shrink': 1,
+                'basis': auto
+            );
+        }
+        $arg2: nth($flex, 2);
+        @if is-number($arg2) and unitless($arg2) {
+            // <number> <number> ...
+            @if $length == 2 {
+                // <number> <number>
+                @return (
+                    'grow': $arg1,
+                    'shrink': $arg2,
+                    'basis': auto
+                );
+            }
+            $arg3: nth($flex, 3);
+            @if is-width($arg3) {
+                // <number> <number> <width>
+                @return (
+                    'grow': $arg1,
+                    'shrink': $arg2,
+                    'basis': $arg3
+                );
+            }
+            // <number> <number> <UNEXPECTED-VALUE>
+            @return null;
+        }
+        @if is-width($arg2) {
+            // <number> <width> ...
+            @if $length == 2 {
+                // <number> <width>
+                @return (
+                    'grow': $arg1,
+                    'shrink': 1,
+                    'basis': $arg2
+                );
+            }
+            // <number> <width> <UNEXPECTED-VALUE>
+            @return null;
+        }
+        // <number> <UNEXPECTED-VALUE>
+        @return null;
+    }
+    @if is-width($arg1) {
+        // <width> ...
+        @if $length == 1 {
+            // <width>
+            @return (
+                'grow': 0,
+                'shrink': 1,
+                'basis': $arg1
+            );
+        }
+        $arg2: nth($flex, 2);
+        @if is-number($arg2) and unitless($arg2) {
+            // <width> <number> ...
+            @if $length == 2 {
+                // <width> <number>
+                @return (
+                    'grow': $arg2,
+                    'shrink': 1,
+                    'basis': $arg1
+                );
+            }
+            $arg3: nth($flex, 3);
+            @if is-number($arg3) and unitless($arg3) {
+                // <width> <number> <number>
+                @return (
+                    'grow': $arg2,
+                    'shrink': $arg3,
+                    'basis': $arg1
+                );
+            }
+            // <width> <number> <UNEXPECTED-VALUE>
+            @return null;
+        }
+        // <width> <UNEXPECTED-VALUE>
+        @return null;
+    }
+    // <UNEXPECTED-VALUE>
+    @return null;
+}
\ No newline at end of file
diff --git a/functions/_parse-linear-gradient.scss b/functions/_parse-linear-gradient.scss
new file mode 100644
index 0000000..29ec2af
--- /dev/null
+++ b/functions/_parse-linear-gradient.scss
@@ -0,0 +1,89 @@
+@import "base-functions";
+@import "parse-color-stop";
+
+@function __parse-linear-gradient($linear-gradient...) {
+    $linear-gradient: unwrap-list($linear-gradient);
+    @if length($linear-gradient) == 0 {
+        // <EMPTY-LIST>
+        @return null;
+    }
+    @if is-space-separated($linear-gradient) {
+        $linear-gradient: ($linear-gradient,);
+    }
+    $arg1: nth($linear-gradient, 1);
+    $length_arg1: length($arg1);
+    @if is-comma-separated($arg1) {
+        // <COMMA-LIST> , ...
+        @return null;
+    }
+    @if $length_arg1 == 0 {
+        // <EMPTY-SPACE-LIST> , ...
+        @return null;
+    }
+    $angle: null;
+    $color-stops: ();
+    $color-stop: __parse-color-stop($arg1);
+    @if $color-stop {
+        // <color-stop> , ...
+        $angle: 180deg; // to bottom
+        $color-stops: append($color-stops, $color-stop, comma);
+    } @else {
+        @if length($linear-gradient) < 2 {
+            // Incorrect arguments count
+            @return null;
+        }
+        @if is-angle($arg1) {
+            // <angle> , ...
+            $angle: $arg1;
+        } @else if nth($arg1, 1) == to {
+            // to ... , ...
+            @if $length_arg1 == 1 {
+                // to , ...
+                @return null;
+            }
+            $side-or-corner: slice-list($arg1, 2, $length_arg1);
+            @if not is-side-or-corner($side-or-corner) {
+                // to <UNEXPECTED-VALUE> , ...
+                @return null;
+            }
+            // to <side-or-corner> , ...
+            $angle: map-get((
+                'top': 0deg,
+                'top right': 45deg,
+                'right top': 45deg,
+                'right': 90deg,
+                'right bottom': 135deg,
+                'bottom right': 135deg,
+                'bottom': 180deg,
+                'bottom left': 225deg,
+                'left bottom': 225deg,
+                'left': 270deg,
+                'left top': 315deg,
+                'top left': 315deg
+            ), inspect($side-or-corner));
+        } @else {
+            // <UNEXPECTED-VALUE> , ...
+            @return null;
+        }
+    }
+    @if length($linear-gradient) >= 2 {
+        @each $color-stop in slice-list($linear-gradient, 2) {
+            $color-stop: __parse-color-stop($color-stop);
+            @if not $color-stop {
+                // Incorrect color-stop
+                @return null;
+            }
+            $color-stops: append($color-stops, $color-stop, comma);
+        }
+    }
+    @if length($color-stops) == 1 {
+        $color-stops: append($color-stops, (
+            'color': transparent,
+            'position': null
+        ), comma);
+    }
+    @return (
+        'angle': $angle,
+        'color-stops': $color-stops
+    );
+}
\ No newline at end of file
diff --git a/functions/_parse-linear-gradients.scss b/functions/_parse-linear-gradients.scss
new file mode 100644
index 0000000..4092f1c
--- /dev/null
+++ b/functions/_parse-linear-gradients.scss
@@ -0,0 +1,23 @@
+@import "base-functions";
+@import "parse-linear-gradient";
+
+@function __parse-linear-gradients($linear-gradients...) {
+    $linear-gradients: unwrap-list($linear-gradients, true);
+    @if length($linear-gradients) == 0 {
+        // <EMPTY-LIST>
+        @return null;
+    }
+    @if is-space-separated(nth($linear-gradients, 1)) {
+        $linear-gradients: ($linear-gradients,);
+    }
+    $parsed-linear-gradients: ();
+    @each $linear-gradient in $linear-gradients {
+        $parsed-linear-gradient: __parse-linear-gradient($linear-gradient);
+        @if not $parsed-linear-gradient {
+            // Incorrect linear-gradient
+            @return null;
+        }
+        $parsed-linear-gradients: append($parsed-linear-gradients, $parsed-linear-gradient, comma);
+    }
+    @return $parsed-linear-gradients;
+}
\ No newline at end of file
diff --git a/functions/_parse-radial-gradient.scss b/functions/_parse-radial-gradient.scss
new file mode 100644
index 0000000..8cbfe0d
--- /dev/null
+++ b/functions/_parse-radial-gradient.scss
@@ -0,0 +1,470 @@
+@import "base-functions";
+@import "parse-background-position";
+@import "parse-color-stop";
+
+@function __parse-radial-gradient($radial-gradient...) {
+    $radial-gradient: unwrap-list($radial-gradient);
+    @if length($radial-gradient) == 0 {
+        // <EMPTY-LIST>
+        @return null;
+    }
+    @if is-space-separated($radial-gradient) {
+        $radial-gradient: ($radial-gradient,);
+    }
+    $arg1: nth($radial-gradient, 1);
+    $length_arg1: length($arg1);
+    @if is-comma-separated($arg1) {
+        // <COMMA-LIST> , ...
+        @return null;
+    }
+    @if $length_arg1 == 0 {
+        // <EMPTY-SPACE-LIST> , ...
+        @return null;
+    }
+    $shape: null;
+    $size: null;
+    $position: null;
+    $color-stops: ();
+    $color-stop: __parse-color-stop($arg1);
+    @if $color-stop {
+        // <color-stop> , ...
+        $shape: ellipse;
+        $size: farthest-corner;
+        $position: ('x': center, 'y': center);
+        $color-stops: append($color-stops, $color-stop, comma);
+    } @else {
+        @if length($radial-gradient) < 2 {
+            // Incorrect arguments count
+            @return null;
+        }
+        $arg1_1: unquote(nth($arg1, 1));
+        @if $arg1_1 == circle {
+            // circle ... , ...
+            @if $length_arg1 == 1 {
+                // circle , ...
+                $shape: $arg1_1;
+                $size: farthest-corner;
+                $position: ('x': center, 'y': center);
+            } @else {
+                $arg1_2: unquote(nth($arg1, 2));
+                @if $arg1_2 == at {
+                    // circle at ... , ...
+                    @if $length_arg1 == 2 {
+                        // circle at , ...
+                        @return null;
+                    }
+                    $position: __parse-background-position(slice-list($arg1, 3, $length_arg1));
+                    @if not $position {
+                        // circle at <UNEXPECTED-VALUE> ... , ...
+                        @return null;
+                    }
+                    // circle at <position> , ...
+                    $shape: $arg1_1;
+                    $size: farthest-corner;
+                    //$position: $position;
+                } @else if is-length($arg1_2) or is-extent-keyword($arg1_2) {
+                    // circle [<length> | <extent-keyword>] ... , ...
+                    @if $length_arg1 == 2 {
+                        // circle [<length> | <extent-keyword>] , ...
+                        $shape: $arg1_1;
+                        $size: $arg1_2;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        @if nth($arg1, 3) != at {
+                            // circle [<length> | <extent-keyword>] <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // circle [<length> | <extent-keyword>] at ... , ...
+                        @if $length_arg1 == 3 {
+                            // circle [<length> | <extent-keyword>] at , ...
+                            @return null;
+                        }
+                        $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                        @if not $position {
+                            // circle [<length> | <extent-keyword>] at <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // circle [<length> | <extent-keyword>] at <position> , ...
+                        $shape: $arg1_1;
+                        $size: $arg1_2;
+                        //$position: $position;
+                    }
+                } @else {
+                    // circle <UNEXPECTED-VALUE> ... , ...
+                    @return null;
+                }
+            }
+        } @else if is-length($arg1_1) {
+            // <length> ... , ...
+            @if $length_arg1 == 1 {
+                // <length> , ...
+                $shape: circle;
+                $size: $arg1_1;
+                $position: ('x': center, 'y': center);
+            } @else {
+                $arg1_2: unquote(nth($arg1, 2));
+                @if $arg1_2 == at {
+                    // <length> at ... , ...
+                    @if $length_arg1 == 2 {
+                        // <length> at , ...
+                        @return null;
+                    }
+                    $position: __parse-background-position(slice-list($arg1, 3, $length_arg1));
+                    @if not $position {
+                        // <length> at <UNEXPECTED-VALUE> ... , ...
+                        @return null;
+                    }
+                    // <length> at <position> , ...
+                    $shape: circle;
+                    $size: $arg1_1;
+                    //$position: $position;
+                } @else if $arg1_2 == circle {
+                    // <length> circle ... , ...
+                    @if $length_arg1 == 2 {
+                        // <length> circle , ...
+                        $shape: $arg1_2;
+                        $size: $arg1_1;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        @if nth($arg1, 3) != at {
+                            // <length> circle <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // <length> circle at ... , ...
+                        @if $length_arg1 == 3 {
+                            // <length> circle at , ...
+                            @return null;
+                        }
+                        $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                        @if not $position {
+                            // <length> circle at <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // <length> circle at <position> , ...
+                        $shape: $arg1_2;
+                        $size: $arg1_1;
+                        //$position: $position;
+                    }
+                } @else if is-length($arg1_2) or is-percentage($arg1_2) {
+                    // <length> [<length> | <percentage>] ... , ...
+                    @if $length_arg1 == 2 {
+                        // <length> [<length> | <percentage>] , ...
+                        $shape: ellipse;
+                        $size: $arg1_1 $arg1_2;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        $arg1_3: unquote(nth($arg1, 3));
+                        @if $arg1_3 == at {
+                            // <length> [<length> | <percentage>] at ... , ...
+                            @if $length_arg1 == 3 {
+                                // <length> [<length> | <percentage>] at , ...
+                                @return null;
+                            }
+                            $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                            @if not $position {
+                                // <length> [<length> | <percentage>] at <UNEXPECTED-VALUE> ... , ...
+                                @return null;
+                            }
+                            // <length> [<length> | <percentage>] at <position> , ...
+                            $shape: ellipse;
+                            $size: $arg1_1 $arg1_2;
+                            //$position: $position;
+                        } @else if $arg1_3 == ellipse {
+                            // <length> [<length> | <percentage>] ellipse ... , ...
+                            @if $length_arg1 == 3 {
+                                // <length> [<length> | <percentage>] ellipse , ...
+                                $shape: $arg1_3;
+                                $size: $arg1_1 $arg1_2;
+                                $position: ('x': center, 'y': center);
+                            } @else {
+                                @if nth($arg1, 4) != at {
+                                    // <length> [<length> | <percentage>] ellipse <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // <length> [<length> | <percentage>] ellipse at ... , ...
+                                @if $length_arg1 == 4 {
+                                    // <length> [<length> | <percentage>] ellipse at , ...
+                                    @return null;
+                                }
+                                $position: __parse-background-position(slice-list($arg1, 5, $length_arg1));
+                                @if not $position {
+                                    // <length> [<length> | <percentage>] ellipse at <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // <length> [<length> | <percentage>] ellipse at <position> , ...
+                                $shape: $arg1_3;
+                                $size: $arg1_1 $arg1_2;
+                                //$position: $position;
+                            }
+                        } @else {
+                            // <length> [<length> | <percentage>] <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                    }
+                } @else {
+                    // <length> <UNEXPECTED-VALUE> ... , ...
+                    @return null;
+                }
+            }
+        } @else if $arg1_1 == ellipse {
+            // ellipse ... , ...
+            @if $length_arg1 == 1 {
+                // ellipse , ...
+                $shape: $arg1_1;
+                $size: farthest-corner;
+                $position: ('x': center, 'y': center);
+            } @else {
+                $arg1_2: unquote(nth($arg1, 2));
+                @if $arg1_2 == at {
+                    // ellipse at ... , ...
+                    @if $length_arg1 == 2 {
+                        // ellipse at , ...
+                        @return null;
+                    }
+                    $position: __parse-background-position(slice-list($arg1, 3, $length_arg1));
+                    @if not $position {
+                        // ellipse at <UNEXPECTED-VALUE> ... , ...
+                        @return null;
+                    }
+                    // ellipse at <position> , ...
+                    $shape: $arg1_1;
+                    $size: farthest-corner;
+                    //$position: $position;
+                } @else if is-length($arg1_2) or is-percentage($arg1_2) {
+                    // ellipse [<length> | <percentage>] ... , ...
+                    @if $length_arg1 >= 3 {
+                        $arg1_3: unquote(nth($arg1, 3));
+                        @if is-length($arg1_3) or is-percentage($arg1_3) {
+                            // ellipse [<length> | <percentage>] [<length> | <percentage>] ... , ...
+                            @if $length_arg1 == 3 {
+                                // ellipse [<length> | <percentage>] [<length> | <percentage>] , ...
+                                $shape: $arg1_1;
+                                $size: $arg1_2 $arg1_3;
+                                $position: ('x': center, 'y': center);
+                            } @else {
+                                @if nth($arg1, 4) != at {
+                                    // ellipse [<length> | <percentage>] [<length> | <percentage>] <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // ellipse [<length> | <percentage>] [<length> | <percentage>] at ... , ...
+                                @if $length_arg1 == 4 {
+                                    // ellipse [<length> | <percentage>] [<length> | <percentage>] at , ...
+                                    @return null;
+                                }
+                                $position: __parse-background-position(slice-list($arg1, 5, $length_arg1));
+                                @if not $position {
+                                    // ellipse [<length> | <percentage>] [<length> | <percentage>] at <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // ellipse [<length> | <percentage>] [<length> | <percentage>] at <position> , ...
+                                $shape: $arg1_1;
+                                $size: $arg1_2 $arg1_3;
+                                //$position: $position;
+                            }
+                        } @else {
+                            // ellipse [<length> | <percentage>] <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                    } @else {
+                        // ellipse [<length> | <percentage>] , ...
+                        @return null;
+                    }
+                } @else if is-extent-keyword($arg1_2) {
+                    // ellipse <extent-keyword> ... , ...
+                    @if $length_arg1 == 2 {
+                        // ellipse <extent-keyword> , ...
+                        $shape: $arg1_1;
+                        $size: $arg1_2;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        @if nth($arg1, 3) != at {
+                            // ellipse <extent-keyword> <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // ellipse <extent-keyword> at ... , ...
+                        @if $length_arg1 == 3 {
+                            // ellipse <extent-keyword> at , ...
+                            @return null;
+                        }
+                        $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                        @if not $position {
+                            // ellipse <extent-keyword> at <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // ellipse <extent-keyword> at <position> , ...
+                        $shape: $arg1_1;
+                        $size: $arg1_2;
+                        //$position: $position;
+                    }
+                } @else {
+                    // ellipse <UNEXPECTED-VALUE> ... , ...
+                    @return null;
+                }
+            }
+        } @else if is-percentage($arg1_1) {
+            // <percentage> ... , ...
+            @if $length_arg1 >= 2 {
+                $arg1_2: unquote(nth($arg1, 2));
+                @if is-length($arg1_2) or is-percentage($arg1_2) {
+                    // <percentage> [<length> | <percentage>] ... , ...
+                    @if $length_arg1 == 2 {
+                        // <percentage> [<length> | <percentage>] , ...
+                        $shape: ellipse;
+                        $size: $arg1_1 $arg1_2;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        $arg1_3: unquote(nth($arg1, 3));
+                        @if $arg1_3 == at {
+                            // <percentage> [<length> | <percentage>] at ... , ...
+                            @if $length_arg1 == 3 {
+                                // <percentage> [<length> | <percentage>] at , ...
+                                @return null;
+                            }
+                            $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                            @if not $position {
+                                // <percentage> [<length> | <percentage>] at <UNEXPECTED-VALUE> ... , ...
+                                @return null;
+                            }
+                            // <percentage> [<length> | <percentage>] at <position> , ...
+                            $shape: ellipse;
+                            $size: $arg1_1 $arg1_2;
+                            //$position: $position;
+                        } @else if $arg1_3 == ellipse {
+                            // <percentage> [<length> | <percentage>] ellipse ... , ...
+                            @if $length_arg1 == 3 {
+                                // <percentage> [<length> | <percentage>] ellipse , ...
+                                $shape: $arg1_3;
+                                $size: $arg1_1 $arg1_2;
+                                $position: ('x': center, 'y': center);
+                            } @else {
+                                @if nth($arg1, 4) != at {
+                                    // <percentage> [<length> | <percentage>] ellipse <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // <percentage> [<length> | <percentage>] ellipse at ... , ...
+                                @if $length_arg1 == 4 {
+                                    // <percentage> [<length> | <percentage>] ellipse at , ...
+                                    @return null;
+                                }
+                                $position: __parse-background-position(slice-list($arg1, 5, $length_arg1));
+                                @if not $position {
+                                    // <percentage> [<length> | <percentage> ellipse at <UNEXPECTED-VALUE> ... , ...
+                                    @return null;
+                                }
+                                // <percentage> [<length> | <percentage>] ellipse at <position> , ...
+                                $shape: $arg1_3;
+                                $size: $arg1_1 $arg1_2;
+                                //$position: $position;
+                            }
+                        } @else {
+                            // <percentage> [<length> | <percentage>] <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                    }
+                } @else {
+                    // <percentage> <UNEXPECTED-VALUE> ... , ...
+                    @return null;
+                }
+            } @else {
+                // <percentage> , ...
+                @return null;
+            }
+        } @else if is-extent-keyword($arg1_1) {
+            // <extent-keyword> ... , ...
+            @if $length_arg1 == 1 {
+                // <extent-keyword> , ...
+                $shape: ellipse;
+                $size: $arg1_1;
+                $position: ('x': center, 'y': center);
+            } @else {
+                $arg1_2: unquote(nth($arg1, 2));
+                @if $arg1_2 == at {
+                    // <extent-keyword> at ... , ...
+                    @if $length_arg1 == 2 {
+                        // <extent-keyword> at , ...
+                        @return null;
+                    }
+                    $position: __parse-background-position(slice-list($arg1, 3, $length_arg1));
+                    @if not $position {
+                        // <extent-keyword> at <UNEXPECTED-VALUE> ... , ...
+                        @return null;
+                    }
+                    // <extent-keyword> at <position> , ...
+                    $shape: ellipse;
+                    $size: $arg1_1;
+                    //$position: $position;
+                } @else if $arg1_2 == circle or $arg1_2 == ellipse {
+                    // <extent-keyword> [circle | ellipse] ... , ...
+                    @if $length_arg1 == 2 {
+                        // <extent-keyword> [circle | ellipse] , ...
+                        $shape: $arg1_2;
+                        $size: $arg1_1;
+                        $position: ('x': center, 'y': center);
+                    } @else {
+                        @if nth($arg1, 3) != at {
+                            // <extent-keyword> [circle | ellipse] <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // <extent-keyword> [circle | ellipse] at ... , ...
+                        @if $length_arg1 == 3 {
+                            // <extent-keyword> [circle | ellipse] at , ...
+                            @return null;
+                        }
+                        $position: __parse-background-position(slice-list($arg1, 4, $length_arg1));
+                        @if not $position {
+                            // <extent-keyword> [circle | ellipse] at <UNEXPECTED-VALUE> ... , ...
+                            @return null;
+                        }
+                        // <extent-keyword> [circle | ellipse] at <position> , ...
+                        $shape: $arg1_2;
+                        $size: $arg1_1;
+                        //$position: $position;
+                    }
+                } @else {
+                    // <extent-keyword> <UNEXPECTED-VALUE> ... , ...
+                    @return null;
+                }
+            }
+        } @else if $arg1_1 == at {
+            // at ... , ...
+            @if $length_arg1 == 1 {
+                // at , ...
+                @return null;
+            }
+            $position: __parse-background-position(slice-list($arg1, 2, $length_arg1));
+            @if not $position {
+                // at <UNEXPECTED-VALUE> ... , ...
+                @return null;
+            }
+            // at <position> , ...
+            $shape: ellipse;
+            $size: farthest-corner;
+            //$position: $position;
+        } @else {
+            // <UNEXPECTED-VALUE> ... , ...
+            @return null;
+        }
+    }
+    @if length($radial-gradient) >=2 {
+        @each $color-stop in slice-list($radial-gradient, 2) {
+            $color-stop: __parse-color-stop($color-stop);
+            @if not $color-stop {
+                // Incorrect color-stop
+                @return null;
+            }
+            $color-stops: append($color-stops, $color-stop, comma);
+        }
+    }
+    @if length($color-stops) == 1 {
+        $color-stops: append($color-stops, (
+            'color': transparent,
+            'position': null
+        ), comma);
+    }
+    @return (
+        'shape': $shape,
+        'size': $size,
+        'position': $position,
+        'color-stops': $color-stops
+    );
+}
\ No newline at end of file
diff --git a/functions/_parse-radial-gradients.scss b/functions/_parse-radial-gradients.scss
new file mode 100644
index 0000000..94dc174
--- /dev/null
+++ b/functions/_parse-radial-gradients.scss
@@ -0,0 +1,23 @@
+@import "base-functions";
+@import "parse-radial-gradient";
+
+@function __parse-radial-gradients($radial-gradients...) {
+    $radial-gradients: unwrap-list($radial-gradients, true);
+    @if length($radial-gradients) == 0 {
+        // <EMPTY-LIST>
+        @return null;
+    }
+    @if is-space-separated(nth($radial-gradients, 1)) {
+        $radial-gradients: ($radial-gradients,);
+    }
+    $parsed-radial-gradients: ();
+    @each $radial-gradient in $radial-gradients {
+        $parsed-radial-gradient: __parse-radial-gradient($radial-gradient);
+        @if not $parsed-radial-gradient {
+            // Incorrect radial-gradient
+            @return null;
+        }
+        $parsed-radial-gradients: append($parsed-radial-gradients, $parsed-radial-gradient, comma);
+    }
+    @return $parsed-radial-gradients;
+}
\ No newline at end of file
diff --git a/functions/_parse-transition.scss b/functions/_parse-transition.scss
new file mode 100644
index 0000000..9b28985
--- /dev/null
+++ b/functions/_parse-transition.scss
@@ -0,0 +1,56 @@
+@import "base-functions";
+
+// Based on Compass transition-map function
+// https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_transition.scss#L60-L78
+@function __parse-transition($transition) {
+    $property: null;
+    $duration: null;
+    $function: null;
+    $delay: null;
+    @if is-comma-separated($transition) {
+        // <COMMA-LIST>
+        @return null;
+    }
+    $length: length($transition);
+    @if not ($length >= 1 and $length <= 4) {
+        // Incorrect arguments count
+        @return null;
+    }
+    @each $item in $transition {
+        @if is-time($item) {
+            @if $duration == null {
+                $duration: $item;
+            } @else {
+                @if $delay == null {
+                    $delay: $item;
+                } @else {
+                    // Third <time>
+                    @return null;
+                }
+            }
+        } @else if is-timing-function($item) {
+            @if $function == null {
+                $function: $item;
+            } @else {
+                // Second <timing-function>
+                @return null;
+            }
+        } @else if is-string($item) {
+            @if $property == null {
+                $property: $item;
+            } @else {
+                // Second <property>
+                @return null;
+            }
+        } @else {
+            // Unexpected value
+            @return null;
+        }
+    }
+    @return (
+        'property': $property or all,
+        'duration': $duration or 0s,
+        'function': $function or ease,
+        'delay': $delay or 0s,
+    );
+}
\ No newline at end of file
diff --git a/functions/_parse-transitions.scss b/functions/_parse-transitions.scss
new file mode 100644
index 0000000..e0d90f8
--- /dev/null
+++ b/functions/_parse-transitions.scss
@@ -0,0 +1,23 @@
+@import "base-functions";
+@import "parse-transition";
+
+@function __parse-transitions($transitions...) {
+    $transitions: unwrap-list($transitions, true);
+    @if length($transitions) == 0 {
+        // <EMPTY-LIST>
+        @return null;
+    }
+    @if is-space-separated($transitions) {
+        $transitions: ($transitions,);
+    }
+    $parsed-transitions: ();
+    @each $transition in $transitions {
+        $parsed-transition: __parse-transition($transition);
+        @if not $parsed-transition {
+            // Incorrect transition
+            @return null;
+        }
+        $parsed-transitions: append($parsed-transitions, $parsed-transition, comma);
+    }
+    @return $parsed-transitions;
+}
\ No newline at end of file
diff --git a/mixins/_align.scss b/mixins/_align.scss
new file mode 100644
index 0000000..a3b07a3
--- /dev/null
+++ b/mixins/_align.scss
@@ -0,0 +1,34 @@
+@import "base-mixins";
+
+// Initial: stretch
+//
+// Syntax: flex-start | flex-end | center | space-between | space-around | stretch
+//
+@mixin align-content($value) {
+    @include prefixed-property(align-content, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: stretch
+//
+// Syntax: flex-start | flex-end | center | baseline | stretch
+//
+@mixin align-items($value) {
+    @include prefixed-property(align-items, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: auto
+//
+// Syntax: auto | flex-start | flex-end | center | baseline | stretch
+//
+@mixin align-self($value) {
+    @include prefixed-property(align-self, $value, (
+        -webkit,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_animation.scss b/mixins/_animation.scss
new file mode 100644
index 0000000..e320d31
--- /dev/null
+++ b/mixins/_animation.scss
@@ -0,0 +1,172 @@
+@import "base-mixins";
+
+// Initial: none 0s ease 0s 1 normal none running
+//
+// Syntax: <single-animation>#
+//
+//         where
+//
+//         <single-animation> = <single-animation-name>
+//                              ||
+//                              <single-animation-duration>
+//                              ||
+//                              <single-animation-timing-function>
+//                              ||
+//                              <single-animation-delay>
+//                              ||
+//                              <single-animation-iteration-count>
+//                              ||
+//                              <single-animation-direction>
+//                              ||
+//                              <single-animation-fill-mode>
+//                              ||
+//                              <single-animation-play-state>
+//
+@mixin animation($animations...) {
+    @include prefixed-property(animation, $animations, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: none
+//
+// Syntax: <single-animation-name>#
+//
+//         where
+//
+//         <single-animation-name> = none | <IDENT>
+//
+@mixin animation-name($names...) {
+    @include prefixed-property(animation-name, $names, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 0s
+//
+// Syntax: <time>#
+//
+@mixin animation-duration($durations...) {
+    @include prefixed-property(animation-duration, $durations, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: ease
+//
+// Syntax: <single-timing-function>#
+//
+//         where
+//
+//         <single-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end
+//                                    |
+//                                    steps(<integer> [, [start | end]]?)
+//                                    |
+//                                    cubic-bezier(<number>, <number>, <number>, <number>)
+//
+//         ease        = cubic-bezier(0.25, 0.1, 0.25, 1.0)
+//         linear      = cubic-bezier(0.0,  0.0, 1.0,  1.0)
+//         ease-in     = cubic-bezier(0.42, 0,   1.0,  1.0)
+//         ease-out    = cubic-bezier(0,    0,   0.58, 1.0)
+//         ease-in-out = cubic-bezier(0.42, 0,   0.58, 1.0)
+//         step-start  = steps(1, start)
+//         step-end    = steps(1, end)
+//
+@mixin animation-timing-function($timing-functions...) {
+    @include prefixed-property(animation-timing-function, $timing-functions, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 0s
+//
+// Syntax: <time>#
+//
+@mixin animation-delay($delays...) {
+    @include prefixed-property(animation-delay, $delays, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 1
+//
+// Syntax: <single-animation-iteration-count>#
+//
+//         where
+//
+//         <single-animation-iteration-count> = infinite | <number>
+//
+@mixin animation-iteration-count($iteration-counts...) {
+    @include prefixed-property(animation-iteration-count, $iteration-counts, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: normal
+//
+// Syntax: <single-animation-direction>#
+//
+//         where
+//
+//         <single-animation-direction> = normal | reverse | alternate | alternate-reverse
+//
+@mixin animation-direction($directions...) {
+    @include prefixed-property(animation-direction, $directions, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: none
+//
+// Syntax: <single-animation-fill-mode>#
+//
+//         where
+//
+//         <single-animation-fill-mode> = none | forwards | backwards | both
+//
+@mixin animation-fill-mode($fill-modes...) {
+    @include prefixed-property(animation-fill-mode, $fill-modes, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: running
+//
+// Syntax: <single-animation-play-state>#
+//
+//         where
+//
+//         <single-animation-play-state> = running | paused
+//
+@mixin animation-play-state($play-states...) {
+    @include prefixed-property(animation-play-state, $play-states, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_backface.scss b/mixins/_backface.scss
new file mode 100644
index 0000000..71289d0
--- /dev/null
+++ b/mixins/_backface.scss
@@ -0,0 +1,13 @@
+@import "base-mixins";
+
+// Initial: visible
+//
+// Syntax: visible | hidden
+//
+@mixin backface-visibility($value) {
+    @include prefixed-property(backface-visibility, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_background.scss b/mixins/_background.scss
new file mode 100644
index 0000000..cd0d37a
--- /dev/null
+++ b/mixins/_background.scss
@@ -0,0 +1,60 @@
+@import "base-mixins";
+
+// Initial: border-box
+//
+// Syntax: <box>#
+//
+//         where
+//
+//         <box> = border-box | padding-box | content-box
+//
+@mixin background-clip($clips...) {
+    $short-clips: ();
+    @each $clip in $clips {
+        $short-clip: if($clip == border-box, border, if($clip == padding-box, padding, $clip));
+        $short-clips: append($short-clips, $short-clip);
+    }
+    @include prefixed-property(background-clip, (
+        -webkit: $clips,
+        -moz: $short-clips,
+        '': $clips,
+    ));
+}
+
+// Initial: padding-box
+//
+// Syntax: <box>#
+//
+//         where
+//
+//         <box> = border-box | padding-box | content-box
+//
+@mixin background-origin($origins...) {
+    $short-origins: ();
+    @each $origin in $origins {
+        $short-origin: if($origin == border-box, border, if($origin == padding-box, padding, $origin));
+        $short-origins: append($short-origins, $short-origin);
+    }
+    @include prefixed-property(background-origin, (
+        -webkit: $origins,
+        -moz: $short-origins,
+        '': $origins,
+    ));
+}
+
+// Initial: auto
+//
+// Syntax: <bg-size>#
+//
+//         where
+//
+//         <bg-size> = [<length> | <percentage> | auto]{1, 2} | cover | contain
+//
+@mixin background-size($sizes...) {
+    @include prefixed-property(background-size, $sizes, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_base-mixins.scss b/mixins/_base-mixins.scss
new file mode 100644
index 0000000..c5a3a11
--- /dev/null
+++ b/mixins/_base-mixins.scss
@@ -0,0 +1,49 @@
+@import "../functions/base-functions";
+
+@mixin prefixed-property($property, $value, $prefixes...) {
+    $values: ();
+    @if is-map($value) {
+        @each $prefix, $value in $value {
+            @if length($value) > 0 {
+                $values: append($values, ($prefix, $value));
+            }
+        }
+    } @else {
+        @if length($value) > 0 {
+            $prefixes: unwrap-list($prefixes);
+            @each $prefix in $prefixes {
+                $values: append($values, ($prefix, $value));
+            }
+        }
+    }
+    @each $prefix, $value in $values {
+        $prefix: if(is-string($prefix) and str-length($prefix) > 0, '#{$prefix}-', '');
+        #{$prefix}#{$property}: $value;
+    }
+}
+
+@mixin prefixed-value($property, $value, $prefixes...) {
+    $values: ();
+    @if is-map($value) {
+        @each $prefix, $value in $value {
+            @if $value and length($value) > 0 {
+                $values: append($values, ($prefix, $value));
+            }
+        }
+    } @else {
+        @if $value and length($value) > 0 {
+            $prefixes: unwrap-list($prefixes);
+            @each $prefix in $prefixes {
+                $values: append($values, ($prefix, $value));
+            }
+        }
+    }
+    @each $prefix, $value in $values {
+        $prefix: if(is-string($prefix) and str-length($prefix) > 0, '#{$prefix}-', '');
+        $prefixed-values: join((), (), list-separator($value));
+        @each $single-value in $value {
+            $prefixed-values: append($prefixed-values, #{$prefix}#{$single-value});
+        }
+        #{$property}: $prefixed-values;
+    }
+}
\ No newline at end of file
diff --git a/mixins/_border.scss b/mixins/_border.scss
new file mode 100644
index 0000000..706943b
--- /dev/null
+++ b/mixins/_border.scss
@@ -0,0 +1,94 @@
+@import "base-mixins";
+
+// Initial: none 100% 1 0 stretch
+//
+// Syntax: <border-image-source>
+//         ||
+//         <border-image-slice> [/ <border-image-width> | / <border-image-width>? / <border-image-outset> ]?
+//         ||
+//         <border-image-repeat>
+//
+//         where
+//
+//         <border-image-source> = none | <image>
+//         <border-image-slice>  = [<number> | <percentage>]{1, 4} && fill?
+//         <border-image-width>  = [<number> | <percentage> | <length> | auto]{1, 4}
+//         <border-image-outset> = [<number> | <length>]{1, 4}
+//         <border-image-repeat> = [stretch | repeat | round | space]{1, 2}
+//
+@mixin border-image($value) {
+    @include prefixed-property(border-image, $value, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: [<length> | <percentage>]{1, 4} [/ [<length> | <percentage>]{1, 4}]?
+//
+@mixin border-radius($value) {
+    @include prefixed-property(border-radius, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: [<length> | <percentage>]{1, 2}
+//
+@mixin border-top-left-radius($value) {
+    @include prefixed-property(border-radius-topleft, $value, (
+        -moz,
+    ));
+    @include prefixed-property(border-top-left-radius, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: [<length> | <percentage>]{1, 2}
+//
+@mixin border-top-right-radius($value) {
+    @include prefixed-property(border-radius-topright, $value, (
+        -moz,
+    ));
+    @include prefixed-property(border-top-right-radius, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: [<length> | <percentage>]{1, 2}
+//
+@mixin border-bottom-right-radius($value) {
+    @include prefixed-property(border-radius-bottomright, $value, (
+        -moz,
+    ));
+    @include prefixed-property(border-bottom-right-radius, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: [<length> | <percentage>]{1, 2}
+//
+@mixin border-bottom-left-radius($value) {
+    @include prefixed-property(border-radius-bottomleft, $value, (
+        -moz,
+    ));
+    @include prefixed-property(border-bottom-left-radius, $value, (
+        -webkit,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_box.scss b/mixins/_box.scss
new file mode 100644
index 0000000..dcdc8cb
--- /dev/null
+++ b/mixins/_box.scss
@@ -0,0 +1,36 @@
+@import "base-mixins";
+
+// Initial: none
+//
+// Syntax: none | <shadow>#
+//
+//         where
+//
+//         <shadow> = inset? && [<x-offset> <y-offset> <blur-radius>? <spread-radius>? <color>?]
+//
+//                    where
+//
+//                    <x-offset>      = <length>
+//                    <y-offset>      = <length>
+//                    <blur-radius>   = <length>
+//                    <spread-radius> = <length>
+//
+@mixin box-shadow($shadows...) {
+    @include prefixed-property(box-shadow, $shadows, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: content-box
+//
+// Syntax: content-box | padding-box | border-box
+//
+@mixin box-sizing($value) {
+    @include prefixed-property(box-sizing, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_clearfix.scss b/mixins/_clearfix.scss
new file mode 100644
index 0000000..45a934f
--- /dev/null
+++ b/mixins/_clearfix.scss
@@ -0,0 +1,15 @@
+@mixin clearfix {
+    &:before,
+    &:after {
+        content: '';
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    & {
+        zoom: 1;
+    }
+}
\ No newline at end of file
diff --git a/mixins/_column.scss b/mixins/_column.scss
new file mode 100644
index 0000000..36792c9
--- /dev/null
+++ b/mixins/_column.scss
@@ -0,0 +1,123 @@
+@import "base-mixins";
+
+// Initial: balance
+//
+// Syntax: auto | balance
+//
+@mixin column-fill($value) {
+    @include prefixed-property(column-fill, $value, (
+        -moz,
+        '',
+    ));
+}
+
+// Initial: normal
+//
+// Syntax: <length> | normal
+//
+@mixin column-gap($value) {
+    @include prefixed-property(column-gap, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: 0 none currentColor
+//
+// Syntax: <column-rule-width>
+//         ||
+//         <column-rule-style>
+//         ||
+//         [<column-rule-color> | transparent]
+//
+@mixin column-rule($value) {
+    @include prefixed-property(column-rule, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: 0
+//
+// Syntax: thin | medium | thick | <length>
+//
+@mixin column-rule-width($value) {
+    @include prefixed-property(column-rule-width, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: none
+//
+// Syntax: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
+//
+@mixin column-rule-style($value) {
+    @include prefixed-property(column-rule-style, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: currentColor
+//
+// Syntax: <color>
+//
+@mixin column-rule-color($value) {
+    @include prefixed-property(column-rule-color, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: none
+//
+// Syntax: none | all
+//
+@mixin column-span($value) {
+    @include prefixed-property(column-span, $value, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: auto auto
+//
+// Syntax: <column-width> || <column-count>
+//
+@mixin columns($value) {
+    @include prefixed-property(columns, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: auto
+//
+// Syntax: <length> | auto
+//
+@mixin column-width($value) {
+    @include prefixed-property(column-width, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: auto
+//
+// Syntax: <integer> | auto
+//
+@mixin column-count($value) {
+    @include prefixed-property(column-count, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_filter.scss b/mixins/_filter.scss
new file mode 100644
index 0000000..8ba217e
--- /dev/null
+++ b/mixins/_filter.scss
@@ -0,0 +1,120 @@
+@import "base-mixins";
+
+// Initial: none
+//
+// Syntax: none | [<filter-function> | <url>]+
+//
+//         where
+//
+//         <filter-function> = <blur()>
+//                             |
+//                             <brightness()>
+//                             |
+//                             <contrast()>
+//                             |
+//                             <drop-shadow()>
+//                             |
+//                             <grayscale()>
+//                             |
+//                             <hue-rotate()>
+//                             |
+//                             <invert()>
+//                             |
+//                             <opacity()>
+//                             |
+//                             <saturate()>
+//                             |
+//                             <sepia()>
+//
+@mixin filter($filters...) {
+    @include prefixed-property(filter, $filters, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: 0px
+//
+// Syntax: <length>
+//
+@mixin filter-blur($value) {
+    @include filter(unquote('blur(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-brightness($value) {
+    @include filter(unquote('brightness(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-contrast($value) {
+    @include filter(unquote('contrast(#{$value})'));
+}
+
+// Initial: 0px 0px 0px transparent
+//
+// Syntax: <x-offset> <y-offset> <blur-radius>? <color>
+//
+//         where
+//
+//         <x-offset>    = <length>
+//         <y-offset>    = <length>
+//         <blur-radius> = <length>
+//
+@mixin filter-drop-shadow($x, $y, $blur, $color) {
+    @include filter(unquote('drop-shadow(#{$x} #{$y} #{$blur} #{$color})'));
+}
+
+// Initial: 0
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-grayscale($value) {
+    @include filter(unquote('grayscale(#{$value})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin filter-hue-rotate($value) {
+    @include filter(unquote('hue-rotate(#{$value})'));
+}
+
+// Initial: 0
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-invert($value) {
+    @include filter(unquote('invert(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-opacity($value) {
+    @include filter(unquote('opacity(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-saturate($value) {
+    @include filter(unquote('saturate(#{$value})'));
+}
+
+// Initial: 0
+//
+// Syntax: <number> | <percentage>
+//
+@mixin filter-sepia($value) {
+    @include filter(unquote('sepia(#{$value})'));
+}
\ No newline at end of file
diff --git a/mixins/_flex.scss b/mixins/_flex.scss
new file mode 100644
index 0000000..e92ea37
--- /dev/null
+++ b/mixins/_flex.scss
@@ -0,0 +1,130 @@
+@import "../functions/parse-flex";
+@import "base-mixins";
+
+@mixin flexbox {
+    @include prefixed-value(display, box, (
+        -webkit,
+        -moz,
+    ));
+    @include prefixed-value(display, flexbox, (
+        -ms,
+    ));
+    @include prefixed-value(display, flex, (
+        -webkit,
+        '',
+    ));
+}
+
+@mixin inline-flexbox {
+    @include prefixed-value(display, inline-box, (
+        -webkit,
+        -moz,
+    ));
+    @include prefixed-value(display, inline-flexbox, (
+        -ms,
+    ));
+    @include prefixed-value(display, inline-flex, (
+        -webkit,
+        '',
+    ));
+}
+
+// Initial: 0 1 auto
+//
+// Syntax: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
+//
+@mixin flex($value) {
+    $parsed-value: __parse-flex($value);
+    @if not $parsed-value {
+        @warn 'Incorrect flex value: #{inspect($value)}.';
+    } @else {
+        @if $parsed-value != none {
+            $grow: map-get($parsed-value, 'grow');
+            @include prefixed-property(box-flex, $grow, (
+                -webkit,
+                -moz,
+            ));
+        }
+        @include prefixed-property(flex, $value, (
+            -webkit,
+            -ms,
+            '',
+        ));
+    }
+}
+
+// Initial: 0
+//
+// Syntax: <number>
+//
+@mixin flex-grow($value) {
+    @include prefixed-property(box-flex, $value, (
+        -webkit,
+        -moz,
+    ));
+    @include prefixed-property(flex-grow, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
+
+// Initial: 1
+//
+// Syntax: <number>
+//
+@mixin flex-shrink($value) {
+    @include prefixed-property(flex-shrink, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
+
+// Initial: auto
+//
+// Syntax: auto | <width>
+//
+@mixin flex-basis($value) {
+    @include prefixed-property(flex-basis, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
+
+// Initial: row nowrap
+//
+// Syntax: <flex-direction> || <flex-wrap>
+//
+@mixin flex-flow($value) {
+    @include prefixed-property(flex-flow, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
+
+// Initial: row
+//
+// Syntax: row | row-reverse | column | column-reverse
+//
+@mixin flex-direction($value) {
+    @include prefixed-property(flex-direction, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
+
+// Initial: nowrap
+//
+// Syntax: nowrap | wrap | wrap-reverse
+//
+@mixin flex-wrap($value) {
+    @include prefixed-property(flex-wrap, $value, (
+        -webkit,
+        -ms,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_fullscreen.scss b/mixins/_fullscreen.scss
new file mode 100644
index 0000000..04d011a
--- /dev/null
+++ b/mixins/_fullscreen.scss
@@ -0,0 +1,22 @@
+// TODO: replace "@if $root { ... }" by "@if & { ... }".
+@mixin fullscreen($root: false) {
+    $pseudo-classes: (
+        ':-webkit-full-screen',
+        ':-moz-full-screen',
+        ':-ms-fullscreen',
+        ':fullscreen',
+    );
+    @each $pseudo-class in $pseudo-classes {
+        @at-root {
+            @if $root {
+                #{$pseudo-class} {
+                    @content;
+                }
+            } @else {
+                #{$pseudo-class} & {
+                    @content;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/mixins/_gradient.scss b/mixins/_gradient.scss
new file mode 100644
index 0000000..492bc7f
--- /dev/null
+++ b/mixins/_gradient.scss
@@ -0,0 +1,119 @@
+@import "../functions/base-functions";
+@import "../functions/parse-linear-gradients";
+@import "../functions/parse-radial-gradients";
+@import "../functions/helpers";
+@import "base-mixins";
+
+// Syntax: [[<angle> | to <side-or-corner>],]? <color-stop>#
+//
+//         where
+//
+//         <side-or-corner> = [left | right] || [top | bottom]
+//         <color-stop>     = <color> [<percentage> | <length>]?
+//
+@mixin linear-gradient($linear-gradients...) {
+    $repeating: map-get(keywords($linear-gradients), repeating);
+    $function: if($repeating, repeating-linear-gradient, linear-gradient);
+    $linear-gradients: unwrap-list($linear-gradients);
+    $parsed-linear-gradients: __parse-linear-gradients($linear-gradients);
+    @if not $parsed-linear-gradients {
+        @warn 'Incorrect linear-gradients list: #{inspect($linear-gradients)}.';
+    } @else {
+        $gradients: ();
+        $rotated-gradients: ();
+        $webkit-gradients: ();
+        @each $parsed-linear-gradient in $parsed-linear-gradients {
+            $angle: map-get($parsed-linear-gradient, 'angle');
+            $parsed-color-stops: map-get($parsed-linear-gradient, 'color-stops');
+            $color-stops: __parsed-color-stops-to-list($parsed-color-stops);
+            $gradient: '#{$function}(#{$angle}, #{$color-stops})';
+            $gradients: append($gradients, $gradient);
+            $rotated-gradient: '#{$function}(#{90deg - $angle}, #{$color-stops})';
+            $rotated-gradients: append($rotated-gradients, $rotated-gradient);
+            $webkit-color-stops: __parsed-color-stops-to-webkit-color-stops($parsed-color-stops);
+            @if $webkit-color-stops {
+                $direction: __angle-to-webkit-gradient-direction($angle);
+                $webkit-gradient: 'gradient(linear, #{$direction}, #{$webkit-color-stops})';
+                $webkit-gradients: append($webkit-gradients, $webkit-gradient);
+            }
+        }
+        @if length($webkit-gradients) > 0 {
+            @include prefixed-value(background-image, (
+                -webkit: $webkit-gradients
+            ));
+        }
+        @include prefixed-value(background-image, (
+            -webkit: $rotated-gradients,
+            -moz: $rotated-gradients,
+            -ms: $gradients,
+            -o: $rotated-gradients,
+            '': $gradients
+        ));
+    }
+}
+
+// Syntax: [
+//           [circle             || <length>]                     [at <position>]?,
+//           |
+//           [ellipse            || [<length> | <percentage>]{2, 2}] [at <position>]?,
+//           |
+//           [[circle | ellipse] || <extent-keyword>]             [at <position>]?,
+//           |
+//           at <position>,
+//         ]?
+//         <color-stop>#
+//
+//         where
+//
+//         <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+//         <position>       = [[<percentage> | <length> | left | center | right]
+//                             [<percentage> | <length> | top | center | bottom]?]
+//                             |
+//                             [[left | center | right] || [top | center | bottom]]
+//         <color-stop>     = <color> [<percentage> | <length>]?
+//
+@mixin radial-gradient($radial-gradients...) {
+    $repeating: map-get(keywords($radial-gradients), repeating);
+    $function: if($repeating, repeating-radial-gradient, radial-gradient);
+    $radial-gradients: unwrap-list($radial-gradients);
+    $parsed-radial-gradients: __parse-radial-gradients($radial-gradients);
+    @if not $parsed-radial-gradients {
+        @warn 'Incorrect gradients list: #{inspect($radial-gradients)}.';
+    } @else {
+        $gradients: ();
+        $moz-gradients: ();
+        @each $parsed-radial-gradient in $parsed-radial-gradients {
+            $shape: map-get($parsed-radial-gradient, 'shape');
+            $size: map-get($parsed-radial-gradient, 'size');
+            $parsed-position: map-get($parsed-radial-gradient, 'position');
+            $position: map-get($parsed-position, 'x') map-get($parsed-position, 'y');
+            $parsed-color-stops: map-get($parsed-radial-gradient, 'color-stops');
+            $color-stops: __parsed-color-stops-to-list($parsed-color-stops);
+            $gradient: '#{$function}(#{$shape} #{$size} at #{$position}, #{$color-stops})';
+            @if is-extent-keyword($size) {
+                $moz-size: null;
+                @if $size == closest-side {
+                    $moz-size: contain;
+                } @else if $size == farthest-corner {
+                    $moz-size: cover;
+                } @else {
+                    $moz-size: $size;
+                }
+                $moz-gradient: '#{$function}(#{$position}, #{$shape} #{$moz-size}, #{$color-stops})';
+                $moz-gradients: append($moz-gradients, $moz-gradient);
+            }
+            $gradients: append($gradients, $gradient);
+        }
+        @if length($moz-gradients) > 0 {
+            @include prefixed-value(background-image, (
+                -moz: $moz-gradients
+            ));
+        }
+        @include prefixed-value(background-image, (
+            -webkit: $gradients,
+            -ms: $gradients,
+            -o: $gradients,
+            '': $gradients,
+        ));
+    }
+}
\ No newline at end of file
diff --git a/mixins/_justify.scss b/mixins/_justify.scss
new file mode 100644
index 0000000..ba30719
--- /dev/null
+++ b/mixins/_justify.scss
@@ -0,0 +1,12 @@
+@import "base-mixins";
+
+// Initial: flex-start
+//
+// Syntax: flex-start | flex-end | center | space-between | space-around
+//
+@mixin justify-content($value) {
+    @include prefixed-property(justify-content, $value, (
+        -webkit,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_keyframes.scss b/mixins/_keyframes.scss
new file mode 100644
index 0000000..0264dd8
--- /dev/null
+++ b/mixins/_keyframes.scss
@@ -0,0 +1,25 @@
+// Syntax: @keyframes <identifier> {
+//             [from | to | <percentage>]# {
+//                 declaration? [; declaration?]*
+//             }
+//         }
+//
+@mixin keyframes($identifier) {
+    @at-root {
+        @-webkit-keyframes #{$identifier} {
+            @content;
+        }
+
+        @-moz-keyframes #{$identifier} {
+            @content;
+        }
+
+        @-o-keyframes #{$identifier} {
+            @content;
+        }
+
+        @keyframes #{$identifier} {
+            @content;
+        }
+    }
+}
\ No newline at end of file
diff --git a/mixins/_order.scss b/mixins/_order.scss
new file mode 100644
index 0000000..1db3c41
--- /dev/null
+++ b/mixins/_order.scss
@@ -0,0 +1,19 @@
+@import "base-mixins";
+
+// Initial: 0
+//
+// Syntax: <integer>
+//
+@mixin order($value) {
+    @include prefixed-property(box-ordinal-group, $value, (
+        -webkit,
+        -moz,
+    ));
+    @include prefixed-property(flex-order, $value, (
+        -ms,
+    ));
+    @include prefixed-property(order, $value, (
+        -webkit,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_perspective.scss b/mixins/_perspective.scss
new file mode 100644
index 0000000..8dc48ef
--- /dev/null
+++ b/mixins/_perspective.scss
@@ -0,0 +1,32 @@
+@import "base-mixins";
+
+// Initial: none
+//
+// Syntax: none | <length>
+//
+@mixin perspective($value) {
+    @include prefixed-property(perspective, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
+
+// Initial: 50% 50%
+//
+// Syntax: <position>
+//
+//         where
+//
+//         <position> = [[<percentage> | <length> | left | center | right]
+//                       [<percentage> | <length> | top | center | bottom]?]
+//                       |
+//                       [[left | center | right] || [top | center | bottom]]
+//
+@mixin perspective-origin($value) {
+    @include prefixed-property(perspective-origin, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_placeholder.scss b/mixins/_placeholder.scss
new file mode 100644
index 0000000..e954246
--- /dev/null
+++ b/mixins/_placeholder.scss
@@ -0,0 +1,17 @@
+@mixin placeholder {
+    ::-webkit-input-placeholder {
+        @content;
+    }
+
+    ::-moz-placeholder {
+        @content;
+    }
+
+    :-moz-placeholder {
+        @content;
+    }
+
+    :-ms-input-placeholder {
+        @content;
+    }
+}
\ No newline at end of file
diff --git a/mixins/_reset.scss b/mixins/_reset.scss
new file mode 100644
index 0000000..86838eb
--- /dev/null
+++ b/mixins/_reset.scss
@@ -0,0 +1,53 @@
+@mixin reset {
+    @at-root {
+        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
+        address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
+        u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
+        th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
+        ruby, section, summary, time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
+            font-size: 100%;
+            vertical-align: baseline;
+        }
+
+        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+
+        body {
+            line-height: 1;
+        }
+
+        ol, ul {
+            list-style: none;
+        }
+
+        blockquote, q {
+            quotes: none;
+
+            //noinspection CssOverwrittenProperties
+            &:before, &:after {
+                content: '';
+                content: none;
+            }
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        caption, th, td {
+            text-align: left;
+            font-weight: normal;
+            vertical-align: middle;
+        }
+
+        a img {
+            border: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/mixins/_selection.scss b/mixins/_selection.scss
new file mode 100644
index 0000000..42bd6df
--- /dev/null
+++ b/mixins/_selection.scss
@@ -0,0 +1,20 @@
+// TODO: replace "@if $root { ... }" by "@if & { ... }".
+@mixin selection($root: false) {
+    @if $root {
+        ::-moz-selection {
+            @content;
+        }
+
+        ::selection {
+            @content;
+        }
+    } @else {
+        &::-moz-selection {
+            @content;
+        }
+
+        &::selection {
+            @content;
+        }
+    }
+}
\ No newline at end of file
diff --git a/mixins/_tab.scss b/mixins/_tab.scss
new file mode 100644
index 0000000..aa9122b
--- /dev/null
+++ b/mixins/_tab.scss
@@ -0,0 +1,13 @@
+@import "base-mixins";
+
+// Initial: 8
+//
+// Syntax: <integer> | <length>
+//
+@mixin tab-size($value) {
+    @include prefixed-property(tab-size, $value, (
+        -moz,
+        -o,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_transform.scss b/mixins/_transform.scss
new file mode 100644
index 0000000..ca0f0db
--- /dev/null
+++ b/mixins/_transform.scss
@@ -0,0 +1,242 @@
+@import "base-mixins";
+
+// Initial: none
+//
+// Syntax: none | <transform-function>+
+//
+//         where
+//
+//         <transform-function> = <matrix()> | <matrix3d()>
+//                                |
+//                                <rotate()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()>
+//                                |
+//                                <scale()> | <scale3d()> | <scaleX()> | <scaleY()> | <scaleZ()>
+//                                |
+//                                <skew()> | <skewX()> | <skewY()>
+//                                |
+//                                <translate()> | <translate3d()> | <translateX()> | <translateY()> | <translateZ()>
+//
+@mixin transform($functions...) {
+    @include prefixed-property(transform, $functions, (
+        -webkit,
+        -moz,
+        -ms,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 1, 0, 0, 1, 0, 0
+//
+//          a  b  tx          1  0  0
+//                      =
+//          c  d  ty          0  1  0
+//
+// Syntax: <number> [, <number>]{5, 5}
+//
+@mixin transform-matrix($a, $b, $c, $d, $tx, $ty) {
+    @include transform(unquote('matrix(#{$a}, #{$b}, #{$c}, #{$d}, #{$tx}, #{$ty})'));
+}
+
+// Initial: 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1
+//
+//          a1 a2 a3 a4       1  0  0  0
+//
+//          b1 b2 b3 b4       0  1  0  0
+//                        =
+//          c1 c2 c3 c4       0  0  1  0
+//
+//          d1 d2 d3 d4       0  0  0  1
+//
+// Syntax: <number> [, <number>]{15, 15}
+//
+@mixin transform-matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) {
+    $col1: '#{$a1}, #{$b1}, #{$c1}, #{$d1}';
+    $col2: '#{$a2}, #{$b2}, #{$c2}, #{$d2}';
+    $col3: '#{$a3}, #{$b3}, #{$c3}, #{$d3}';
+    $col4: '#{$a4}, #{$b4}, #{$c4}, #{$d4}';
+    @include transform(unquote('matrix3d(#{$col1}, #{$col2}, #{$col3}, #{$col4})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-rotate($angle) {
+    @include transform(unquote('rotate(#{$angle})'));
+}
+
+// Initial: 0, 0, 1, 0deg
+//
+// Syntax: <vector-x>, <vector-y>, <vector-z>, <angle>
+//
+//         where
+//
+//         <vector-x> = <number>
+//         <vector-y> = <number>
+//         <vector-z> = <number>
+//
+@mixin transform-rotate3d($x, $y, $z, $angle) {
+    @include transform(unquote('rotate3d(#{$x}, #{$y}, #{$z}, #{$angle})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-rotateX($angle) {
+    @include transform(unquote('rotateX(#{$angle})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-rotateY($angle) {
+    @include transform(unquote('rotateY(#{$angle})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-rotateZ($angle) {
+    @include transform(unquote('rotateZ(#{$angle})'));
+}
+
+// Initial: 1, 1
+//
+// Syntax: <scale-x> [, <scale-y>]?
+//
+@mixin transform-scale($x, $y: $x) {
+    @include transform(unquote('scale(#{$x}, #{$y})'));
+}
+
+// Initial: 1, 1, 1
+//
+// Syntax: <scale-x>, <scale-y>, <scale-z>
+//
+@mixin transform-scale3d($x, $y, $z) {
+    @include transform(unquote('scale3d(#{$x}, #{$y}, #{$z})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number>
+//
+@mixin transform-scaleX($value) {
+    @include transform(unquote('scaleX(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number>
+//
+@mixin transform-scaleY($value) {
+    @include transform(unquote('scaleY(#{$value})'));
+}
+
+// Initial: 1
+//
+// Syntax: <number>
+//
+@mixin transform-scaleZ($value) {
+    @include transform(unquote('scaleZ(#{$value})'));
+}
+
+// Initial: 0deg, 0deg
+//
+// Syntax: <skew-x> [, <skew-y>]?
+//
+@mixin transform-skew($x, $y) {
+    @include transform(unquote('skew(#{$x}, #{$y})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-skewX($angle) {
+    @include transform(unquote('skewX(#{$angle})'));
+}
+
+// Initial: 0deg
+//
+// Syntax: <angle>
+//
+@mixin transform-skewY($angle) {
+    @include transform(unquote('skewY(#{$angle})'));
+}
+
+// Initial: 0px, 0px
+//
+// Syntax: <translate-x> [, <translate-y>]?
+//
+@mixin transform-translate($x, $y) {
+    @include transform(unquote('translate(#{$x}, #{$y})'));
+}
+
+// Initial: 0px, 0px, 0px
+//
+// Syntax: <translate-x>, <translate-y>, <translate-z>
+//
+@mixin transform-translate3d($x, $y, $z) {
+    @include transform(unquote('translate3d(#{$x}, #{$y}, #{$z})'));
+}
+
+// Initial: 0px
+//
+// Syntax: <number> | <length>
+//
+@mixin transform-translateX($value) {
+    @include transform(unquote('translateX(#{$value})'));
+}
+
+// Initial: 0px
+//
+// Syntax: <number> | <length>
+//
+@mixin transform-translateY($value) {
+    @include transform(unquote('translateY(#{$value})'));
+}
+
+// Initial: 0px
+//
+// Syntax: <length>
+//
+@mixin transform-translateZ($value) {
+    @include transform(unquote('translateZ(#{$value})'));
+}
+
+// Initial: 50% 50%
+//
+// Syntax: <position>
+//
+//         where
+//
+//         <position> = [[<percentage> | <length> | left | center | right]
+//                       [<percentage> | <length> | top | center | bottom]?]
+//                       |
+//                       [[left | center | right] || [top | center | bottom]]
+//
+@mixin transform-origin($value) {
+    @include prefixed-property(transform-origin, $value, (
+        -webkit,
+        -moz,
+        -ms,
+        -o,
+        '',
+    ));
+}
+
+// Initial: flat
+//
+// Syntax: flat | preserve-3d
+//
+@mixin transform-style($value) {
+    @include prefixed-property(transform-style, $value, (
+        -webkit,
+        -moz,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_transition.scss b/mixins/_transition.scss
new file mode 100644
index 0000000..3c9813e
--- /dev/null
+++ b/mixins/_transition.scss
@@ -0,0 +1,122 @@
+@import "../functions/helpers";
+@import "../functions/parse-transitions";
+@import "base-mixins";
+
+// Initial: none
+//
+// Syntax: <single-transition>#
+//
+//         where
+//
+//         <single-transition> = [none | <single-transition-property>]
+//                               ||
+//                               <single-transition-duration>
+//                               ||
+//                               <single-transition-timing-function>
+//                               ||
+//                               <single-transition-delay>
+//
+@mixin transition($transitions...) {
+    $parsed-transitions: __parse-transitions($transitions);
+    @if not $parsed-transitions {
+        @warn 'Incorrect transition list: #{inspect($transitions)}.';
+    } @else {
+        $webkit-transitions: ();
+        $moz-transitions: ();
+        $o-transitions: ();
+        $transitions: ();
+        @each $parsed-transition in $parsed-transitions {
+            $property: map-get($parsed-transition, 'property');
+            $duration: map-get($parsed-transition, 'duration');
+            $function: map-get($parsed-transition, 'function');
+            $delay: map-get($parsed-transition, 'delay');
+            $prefixed-property: __prefix-transition-properties($property);
+            $webkit-property: map-get($prefixed-property, '-webkit');
+            $moz-property: map-get($prefixed-property, '-moz');
+            $o-property: map-get($prefixed-property, '-o');
+            $webkit-transitions: append($webkit-transitions, $webkit-property $duration $function $delay, comma);
+            $moz-transitions: append($moz-transitions, $moz-property $duration $function $delay, comma);
+            $o-transitions: append($o-transitions, $o-property $duration $function $delay, comma);
+            $transitions: append($transitions, $property $duration $function $delay, comma);
+        }
+        @include prefixed-property(transition, (
+            -webkit: $webkit-transitions,
+            -moz: $moz-transitions,
+            -o: $o-transitions,
+            '': $transitions,
+        ));
+    }
+}
+
+// Initial: all
+//
+// Syntax: none | <single-transition-property>#
+//
+//         where
+//
+//         <single-transition-property> = all | <IDENT>
+//
+@mixin transition-property($properties...) {
+    $prefixed-properties: __prefix-transition-properties($properties);
+    @include prefixed-property(transition-property, (
+        -webkit: map-get($prefixed-properties, '-webkit'),
+        -moz: map-get($prefixed-properties, '-moz'),
+        -o: map-get($prefixed-properties, '-o'),
+        '': $properties,
+    ));
+}
+
+// Initial: 0s
+//
+// Syntax: <time>#
+//
+@mixin transition-duration($durations...) {
+    @include prefixed-property(transition-duration, $durations, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: ease
+//
+// Syntax: <single-timing-function>#
+//
+//         where
+//
+//         <single-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end
+//                                    |
+//                                    steps(<integer> [, [start | end]]?)
+//                                    |
+//                                    cubic-bezier(<number>, <number>, <number>, <number>)
+//
+//         ease        = cubic-bezier(0.25, 0.1, 0.25, 1.0)
+//         linear      = cubic-bezier(0.0,  0.0, 1.0,  1.0)
+//         ease-in     = cubic-bezier(0.42, 0,   1.0,  1.0)
+//         ease-out    = cubic-bezier(0,    0,   0.58, 1.0)
+//         ease-in-out = cubic-bezier(0.42, 0,   0.58, 1.0)
+//         step-start  = steps(1, start)
+//         step-end    = steps(1, end)
+//
+@mixin transition-timing-function($timing-functions...) {
+    @include prefixed-property(transition-timing-function, $timing-functions, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
+
+// Initial: 0s
+//
+// Syntax: <time>#
+//
+@mixin transition-delay($delays...) {
+    @include prefixed-property(transition-delay, $delays, (
+        -webkit,
+        -moz,
+        -o,
+        '',
+    ));
+}
\ No newline at end of file
diff --git a/mixins/_triangle.scss b/mixins/_triangle.scss
new file mode 100644
index 0000000..b9d8aff
--- /dev/null
+++ b/mixins/_triangle.scss
@@ -0,0 +1,58 @@
+@mixin triangle($width, $height, $color, $direction: top) {
+    $top-width: 0;
+    $top-color: rgba(0, 0, 0, 0);
+    $right-width: 0;
+    $right-color: rgba(0, 0, 0, 0);
+    $bottom-width: 0;
+    $bottom-color: rgba(0, 0, 0, 0);
+    $left-width: 0;
+    $left-color: rgba(0, 0, 0, 0);
+    $valid-direction: true;
+    @if $direction == top {
+        $left-width: $width / 2;
+        $right-width: $width / 2;
+        $bottom-width: $height;
+        $bottom-color: $color;
+    } @else if $direction == (top right) or $direction == (right top) {
+        $right-width: $width;
+        $right-color: $color;
+        $bottom-width: $height;
+    } @else if $direction == right {
+        $top-width: $height / 2;
+        $bottom-width: $height / 2;
+        $left-width: $width;
+        $left-color: $color;
+    } @else if $direction == (bottom right) or $direction == (right bottom) {
+        $left-width: $width;
+        $bottom-width: $height;
+        $bottom-color: $color;
+    } @else if $direction == bottom {
+        $top-width: $height;
+        $top-color: $color;
+        $left-width: $width / 2;
+        $right-width: $width / 2;
+    } @else if $direction == (bottom left) or $direction == (left bottom) {
+        $top-width: $height;
+        $left-width: $width;
+        $left-color: $color;
+    } @else if $direction == left {
+        $top-width: $height / 2;
+        $bottom-width: $height / 2;
+        $right-width: $width;
+        $right-color: $color;
+    } @else if $direction == (top left) or $direction == (left top) {
+        $top-width: $height;
+        $top-color: $color;
+        $right-width: $width;
+    } @else {
+        @warn 'Incorrect triangle direction: #{inspect($direction)}';
+        $valid-direction: false;
+    }
+    @if $valid-direction {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: $top-width $right-width $bottom-width $left-width;
+        border-color: $top-color $right-color $bottom-color $left-color;
+    }
+}
\ No newline at end of file
diff --git a/mixins/_user.scss b/mixins/_user.scss
new file mode 100644
index 0000000..c3168eb
--- /dev/null
+++ b/mixins/_user.scss
@@ -0,0 +1,14 @@
+@import "base-mixins";
+
+// Initial: text
+//
+// Syntax: none | text | toggle | element | elements | all
+//
+@mixin user-select($value) {
+    @include prefixed-property(user-select, (
+        -webkit: $value,
+        -moz: if($value == none, -moz-none, $value),
+        -ms: $value,
+        '': $value,
+    ));
+}
\ No newline at end of file
diff --git a/test/_test_parse-background-position.scss b/test/_test_parse-background-position.scss
new file mode 100644
index 0000000..789887c
--- /dev/null
+++ b/test/_test_parse-background-position.scss
@@ -0,0 +1,62 @@
+@import "../functions/parse-background-position";
+
+@debug __parse-background-position(())            == null;
+@debug __parse-background-position((0px,))        == null;
+@debug __parse-background-position((0px, 0px))    == null;
+@debug __parse-background-position(0px 0px 0px)   == null;
+@debug __parse-background-position(0%)            == ('x': 0%,     'y': center);
+@debug __parse-background-position(0px)           == ('x': 0px,    'y': center);
+@debug __parse-background-position(left)          == ('x': left,   'y': center);
+@debug __parse-background-position(right)         == ('x': right,  'y': center);
+@debug __parse-background-position(top)           == ('x': center, 'y': top);
+@debug __parse-background-position(bottom)        == ('x': center, 'y': bottom);
+@debug __parse-background-position(center)        == ('x': center, 'y': center);
+@debug __parse-background-position(0% 100%)       == ('x': 0%,     'y': 100%);
+@debug __parse-background-position(0% 100px)      == ('x': 0%,     'y': 100px);
+@debug __parse-background-position(0% left)       == null;
+@debug __parse-background-position(0% right)      == null;
+@debug __parse-background-position(0% top)        == ('x': 0%,     'y': top);
+@debug __parse-background-position(0% bottom)     == ('x': 0%,     'y': bottom);
+@debug __parse-background-position(0% center)     == ('x': 0%,     'y': center);
+@debug __parse-background-position(0px 100%)      == ('x': 0px,    'y': 100%);
+@debug __parse-background-position(0px 100px)     == ('x': 0px,    'y': 100px);
+@debug __parse-background-position(0px left)      == null;
+@debug __parse-background-position(0px right)     == null;
+@debug __parse-background-position(0px top)       == ('x': 0px,    'y': top);
+@debug __parse-background-position(0px bottom)    == ('x': 0px,    'y': bottom);
+@debug __parse-background-position(0px center)    == ('x': 0px,    'y': center);
+@debug __parse-background-position(left 100%)     == ('x': left,   'y': 100%);
+@debug __parse-background-position(left 100px)    == ('x': left,   'y': 100px);
+@debug __parse-background-position(left left)     == null;
+@debug __parse-background-position(left right)    == null;
+@debug __parse-background-position(left top)      == ('x': left,   'y': top);
+@debug __parse-background-position(left bottom)   == ('x': left,   'y': bottom);
+@debug __parse-background-position(left center)   == ('x': left,   'y': center);
+@debug __parse-background-position(right 100%)    == ('x': right,  'y': 100%);
+@debug __parse-background-position(right 100px)   == ('x': right,  'y': 100px);
+@debug __parse-background-position(right left)    == null;
+@debug __parse-background-position(right right)   == null;
+@debug __parse-background-position(right top)     == ('x': right,  'y': top);
+@debug __parse-background-position(right bottom)  == ('x': right,  'y': bottom);
+@debug __parse-background-position(right center)  == ('x': right,  'y': center);
+@debug __parse-background-position(top 100%)      == null;
+@debug __parse-background-position(top 100px)     == null;
+@debug __parse-background-position(top left)      == ('x': left,   'y': top);
+@debug __parse-background-position(top right)     == ('x': right,  'y': top);
+@debug __parse-background-position(top top)       == null;
+@debug __parse-background-position(top bottom)    == null;
+@debug __parse-background-position(top center)    == ('x': center, 'y': top);
+@debug __parse-background-position(bottom 100%)   == null;
+@debug __parse-background-position(bottom 100px)  == null;
+@debug __parse-background-position(bottom left)   == ('x': left,   'y': bottom);
+@debug __parse-background-position(bottom right)  == ('x': right,  'y': bottom);
+@debug __parse-background-position(bottom top)    == null;
+@debug __parse-background-position(bottom bottom) == null;
+@debug __parse-background-position(bottom center) == ('x': center, 'y': bottom);
+@debug __parse-background-position(center 100%)   == ('x': center, 'y': 100%);
+@debug __parse-background-position(center 100px)  == ('x': center, 'y': 100px);
+@debug __parse-background-position(center left)   == ('x': left,   'y': center);
+@debug __parse-background-position(center right)  == ('x': right,  'y': center);
+@debug __parse-background-position(center top)    == ('x': center, 'y': top);
+@debug __parse-background-position(center bottom) == ('x': center, 'y': bottom);
+@debug __parse-background-position(center center) == ('x': center, 'y': center);
\ No newline at end of file
diff --git a/test/_test_parse-color-stop.scss b/test/_test_parse-color-stop.scss
new file mode 100644
index 0000000..5e44536
--- /dev/null
+++ b/test/_test_parse-color-stop.scss
@@ -0,0 +1,16 @@
+@import "../functions/parse-color-stop";
+
+@debug __parse-color-stop(())         == null;
+@debug __parse-color-stop((#fff,))    == null;
+@debug __parse-color-stop((#fff, 0%)) == null;
+@debug __parse-color-stop(#fff 0% 0%) == null;
+@debug __parse-color-stop(#fff)       == (color: #fff, position: null);
+@debug __parse-color-stop(#fff 0%)    == (color: #fff, position: 0%);
+@debug __parse-color-stop(#fff 0px)   == (color: #fff, position: 0px);
+@debug __parse-color-stop(#fff 0)     == (color: #fff, position: 0px);
+@debug __parse-color-stop(0%)         == null;
+@debug __parse-color-stop(0px)        == null;
+@debug __parse-color-stop(0)          == null;
+@debug __parse-color-stop(0% #fff)    == null;
+@debug __parse-color-stop(0px #fff)   == null;
+@debug __parse-color-stop(0 #fff)     == null;
\ No newline at end of file
diff --git a/test/_test_parse-flex.scss b/test/_test_parse-flex.scss
new file mode 100644
index 0000000..bbe6700
--- /dev/null
+++ b/test/_test_parse-flex.scss
@@ -0,0 +1,20 @@
+@import "../functions/parse-flex";
+
+@debug __parse-flex((1, 2, auto))            == null;
+@debug __parse-flex(())                    == null;
+@debug __parse-flex(1 2 3 4)               == null;
+@debug __parse-flex(none)                  == none;
+@debug __parse-flex(none UNEXPECTEDVALUE)  == null;
+@debug __parse-flex(1)                     == ('grow': 1, 'shrink': 1, 'basis': auto);
+@debug __parse-flex(1 2)                   == ('grow': 1, 'shrink': 2, 'basis': auto);
+@debug __parse-flex(1 2 3px)               == ('grow': 1, 'shrink': 2, 'basis': 3px);
+@debug __parse-flex(1 2 UNEXPECTEDVALUE)   == null;
+@debug __parse-flex(1 3px)                 == ('grow': 1, 'shrink': 1, 'basis': 3px);
+@debug __parse-flex(1 3px UNEXPECTEDVALUE) == null;
+@debug __parse-flex(1 UNEXPECTEDVALUE)     == null;
+@debug __parse-flex(3px)                   == ('grow': 0, 'shrink': 1, 'basis': 3px);
+@debug __parse-flex(3px 1)                 == ('grow': 1, 'shrink': 1, 'basis': 3px);
+@debug __parse-flex(3px 1 2)               == ('grow': 1, 'shrink': 2, 'basis': 3px);
+@debug __parse-flex(3px 1 UNEXPECTEDVALUE) == null;
+@debug __parse-flex(3px UNEXPECTEDVALUE)   == null;
+@debug __parse-flex(UNEXPECTEDVALUE)       == null;
\ No newline at end of file
diff --git a/test/_test_parse-linear-gradient.scss b/test/_test_parse-linear-gradient.scss
new file mode 100644
index 0000000..5f3abd6
--- /dev/null
+++ b/test/_test_parse-linear-gradient.scss
@@ -0,0 +1,55 @@
+@import "../functions/parse-linear-gradient";
+
+@debug __parse-linear-gradient() == null;
+@debug __parse-linear-gradient(()) == null;
+@debug __parse-linear-gradient((0deg,), #fff) == null;
+@debug __parse-linear-gradient(#fff) == (
+    'angle': 180deg,
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-linear-gradient(#fff 0%) == (
+    'angle': 180deg,
+    'color-stops': (
+        ('color': #fff, 'position': 0%),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-linear-gradient((), #fff) == null;
+@debug __parse-linear-gradient(0deg) == null;
+@debug __parse-linear-gradient(to right) == null;
+@debug __parse-linear-gradient(0deg, #fff) == (
+    'angle': 0deg,
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-linear-gradient(to, #fff) == null;
+@debug __parse-linear-gradient(to right, #fff) == (
+    'angle': 90deg,
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-linear-gradient(to UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-linear-gradient(UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-linear-gradient(#fff, UNEXPECTEDVALUE) == null;
+@debug __parse-linear-gradient(0deg, UNEXPECTEDVALUE) == null;
+@debug __parse-linear-gradient(#fff, #000) == (
+    'angle': 180deg,
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null)
+    )
+);
+@debug __parse-linear-gradient(0deg, #fff, #000) == (
+    'angle': 0deg,
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null)
+    )
+);
\ No newline at end of file
diff --git a/test/_test_parse-linear-gradients.scss b/test/_test_parse-linear-gradients.scss
new file mode 100644
index 0000000..785f518
--- /dev/null
+++ b/test/_test_parse-linear-gradients.scss
@@ -0,0 +1,56 @@
+@import "../functions/parse-linear-gradients";
+
+@debug __parse-linear-gradients() == null;
+@debug __parse-linear-gradients(#fff) == (
+    (
+        'angle': 180deg,
+        'color-stops': (
+            ('color': #fff, 'position': null),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-linear-gradients(#fff 0%) == (
+    (
+        'angle': 180deg,
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-linear-gradients((#fff 0%,)) == (
+    (
+        'angle': 180deg,
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-linear-gradients(#fff 0%, #000 100%) == (
+    (
+        'angle': 180deg,
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': #000, 'position': 100%)
+        )
+    ),
+);
+@debug __parse-linear-gradients((#fff 0%, #000 100%), (0deg, red 25%, green 75%)) == (
+    (
+        'angle': 180deg,
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': #000, 'position': 100%)
+        )
+    ),
+    (
+        'angle': 0deg,
+        'color-stops': (
+            ('color': red, 'position': 25%),
+            ('color': green, 'position': 75%)
+        )
+    ),
+);
+@debug __parse-linear-gradients((#fff 0%, #000 100%), (UNEXPECTEDVALUE,)) == null;
\ No newline at end of file
diff --git a/test/_test_parse-radial-gradient.scss b/test/_test_parse-radial-gradient.scss
new file mode 100644
index 0000000..cd71ee0
--- /dev/null
+++ b/test/_test_parse-radial-gradient.scss
@@ -0,0 +1,548 @@
+@import "../functions/parse-radial-gradient";
+
+@debug __parse-radial-gradient() == null;
+@debug __parse-radial-gradient(()) == null;
+@debug __parse-radial-gradient((circle,), #fff) == null;
+@debug __parse-radial-gradient(#fff) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(#fff 0%) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': 0%),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle) == null;
+@debug __parse-radial-gradient((), #fff) == null;
+@debug __parse-radial-gradient(circle, #fff) == (
+    'shape': circle,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle, #fff 0%) == (
+    'shape': circle,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': 0%),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle at, #fff) == null;
+@debug __parse-radial-gradient(circle at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': farthest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle 100px, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle closest-corner, #fff) == (
+    'shape': circle,
+    'size': closest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle 100px at, #fff) == null;
+@debug __parse-radial-gradient(circle closest-corner at, #fff) == null;
+@debug __parse-radial-gradient(circle 100px at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle closest-corner at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': closest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle 100px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle closest-corner at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle 100px UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle closest-corner UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px at, #fff) == null;
+@debug __parse-radial-gradient(100px at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px circle, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px circle at, #fff) == null;
+@debug __parse-radial-gradient(100px circle at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px circle at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px circle UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 200px, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 200px at, #fff) == null;
+@debug __parse-radial-gradient(100px 50% at, #fff) == null;
+@debug __parse-radial-gradient(100px 200px at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 50% at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 200px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 50% at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 200px ellipse, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 50% ellipse, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 200px ellipse at, #fff) == null;
+@debug __parse-radial-gradient(100px 50% ellipse at, #fff) == null;
+@debug __parse-radial-gradient(100px 200px ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 50% ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(100px 200px ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 50% ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 200px ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 50% ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 200px UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px 50% UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(100px UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse, #fff) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse at, #fff) == null;
+@debug __parse-radial-gradient(ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50%, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px 200px, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 100px 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 50% 100px, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 50% 100%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 100px 200px at, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px 50% at, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50% 100px at, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50% 100% at, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px 200px at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 200px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 100px 50% at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 100px 50%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 50% 100px at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 50% 100% at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse 100px 200px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px 50% at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50% 100px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50% 100% at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 100px UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse 50% UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse closest-corner, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse closest-corner at, #fff) == null;
+@debug __parse-radial-gradient(ellipse closest-corner at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(ellipse closest-corner at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse closest-corner UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50%, #fff) == null;
+@debug __parse-radial-gradient(50% 100px, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100px at, #fff) == null;
+@debug __parse-radial-gradient(50% 100% at, #fff) == null;
+@debug __parse-radial-gradient(50% 100px at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100% at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100px at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100% at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100px ellipse, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100% ellipse, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100px ellipse at, #fff) == null;
+@debug __parse-radial-gradient(50% 100% ellipse at, #fff) == null;
+@debug __parse-radial-gradient(50% 100px ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100px,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100% ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': 50% 100%,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(50% 100px ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100% ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100px ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100% ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100px UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% 100% UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(50% UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner at, #fff) == null;
+@debug __parse-radial-gradient(closest-corner at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner circle, #fff) == (
+    'shape': circle,
+    'size': closest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner ellipse, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner circle at, #fff) == null;
+@debug __parse-radial-gradient(closest-corner ellipse at, #fff) == null;
+@debug __parse-radial-gradient(closest-corner circle at 50% 50%, #fff) == (
+    'shape': circle,
+    'size': closest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner ellipse at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': closest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(closest-corner circle at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner ellipse at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner circle UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner ellipse UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(closest-corner UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(at, #fff) == null;
+@debug __parse-radial-gradient(at 50% 50%, #fff) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': 50%, 'y': 50%),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': transparent, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(at UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(UNEXPECTEDVALUE, #fff) == null;
+@debug __parse-radial-gradient(circle, #fff, #000) == (
+    'shape': circle,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(circle, #fff, #000, #fff) == (
+    'shape': circle,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null),
+        ('color': #fff, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(#fff, #000) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null)
+    )
+);
+@debug __parse-radial-gradient(#fff, #000, #fff) == (
+    'shape': ellipse,
+    'size': farthest-corner,
+    'position': ('x': center, 'y': center),
+    'color-stops': (
+        ('color': #fff, 'position': null),
+        ('color': #000, 'position': null),
+        ('color': #fff, 'position': null)
+    )
+);
\ No newline at end of file
diff --git a/test/_test_parse-radial-gradients.scss b/test/_test_parse-radial-gradients.scss
new file mode 100644
index 0000000..7e3a2d0
--- /dev/null
+++ b/test/_test_parse-radial-gradients.scss
@@ -0,0 +1,68 @@
+@import "../functions/parse-radial-gradients";
+
+@debug __parse-radial-gradients() == null;
+@debug __parse-radial-gradients(#fff) == (
+    (
+        'shape': ellipse,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': #fff, 'position': null),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-radial-gradients(#fff 0%) == (
+    (
+        'shape': ellipse,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-radial-gradients((#fff 0%,)) == (
+    (
+        'shape': ellipse,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': transparent, 'position': null)
+        )
+    ),
+);
+@debug __parse-radial-gradients(#fff 0%, #000 100%) == (
+    (
+        'shape': ellipse,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': #000, 'position': 100%)
+        )
+    ),
+);
+@debug __parse-radial-gradients((#fff 0%, #000 100%), (circle, red 25%, green 75%)) == (
+    (
+        'shape': ellipse,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': #fff, 'position': 0%),
+            ('color': #000, 'position': 100%)
+        )
+    ),
+    (
+        'shape': circle,
+        'size': farthest-corner,
+        'position': ('x': center, 'y': center),
+        'color-stops': (
+            ('color': red, 'position': 25%),
+            ('color': green, 'position': 75%)
+        )
+    ),
+);
+@debug __parse-radial-gradients((#fff 0%, #000 100%), (UNEXPECTEDVALUE,)) == null;
\ No newline at end of file
diff --git a/test/_test_parse-transition.scss b/test/_test_parse-transition.scss
new file mode 100644
index 0000000..e325f72
--- /dev/null
+++ b/test/_test_parse-transition.scss
@@ -0,0 +1,213 @@
+@import "../functions/parse-transition";
+
+@debug __parse-transition((all, 0s, ease, 0s)) == null;
+@debug __parse-transition(all 0s ease 0s none) == null;
+@debug __parse-transition(()) == null;
+@debug __parse-transition(0%) == null;
+@debug __parse-transition(left top) == null;
+@debug __parse-transition(1s 2s 3s) == null;
+@debug __parse-transition(ease linear) == null;
+@debug __parse-transition(none) == (
+    'property': none,
+    'duration': 0s,
+    'function': ease,
+    'delay': 0s
+);
+@debug __parse-transition(left) == (
+    'property': left,
+    'duration': 0s,
+    'function': ease,
+    'delay': 0s
+);
+@debug __parse-transition(left 1s) == (
+    'property': left,
+    'duration': 1s,
+    'function': ease,
+    'delay': 0s
+);
+@debug __parse-transition(left linear) == (
+    'property': left,
+    'duration': 0s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(left 1s linear) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(left 1s 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': ease,
+    'delay': 2s
+);
+@debug __parse-transition(left 1s linear 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(left 1s 2s linear) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(left linear 1s 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s) == (
+    'property': all,
+    'duration': 1s,
+    'function': ease,
+    'delay': 0s
+);
+@debug __parse-transition(1s left) == (
+    'property': left,
+    'duration': 1s,
+    'function': ease,
+    'delay': 0s
+);
+@debug __parse-transition(1s linear) == (
+    'property': all,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(1s 2s) == (
+    'property': all,
+    'duration': 1s,
+    'function': ease,
+    'delay': 2s
+);
+@debug __parse-transition(1s left linear) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(1s left 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': ease,
+    'delay': 2s
+);
+@debug __parse-transition(1s linear left) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(1s linear 2s) == (
+    'property': all,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s 2s left) == (
+    'property': left,
+    'duration': 1s,
+    'function': ease,
+    'delay': 2s
+);
+@debug __parse-transition(1s 2s linear) == (
+    'property': all,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s left linear 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s left 2s linear) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s linear left 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s linear 2s left) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s 2s left linear) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(1s 2s linear left) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(linear) == (
+    'property': all,
+    'duration': 0s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(linear left) == (
+    'property': left,
+    'duration': 0s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(linear 1s) == (
+    'property': all,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(linear left 1s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(linear 1s left) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 0s
+);
+@debug __parse-transition(linear 1s 2s) == (
+    'property': all,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(linear left 1s 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(linear 1s left 2s) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
+@debug __parse-transition(linear 1s 2s left) == (
+    'property': left,
+    'duration': 1s,
+    'function': linear,
+    'delay': 2s
+);
\ No newline at end of file
diff --git a/test/_test_parse-transitions.scss b/test/_test_parse-transitions.scss
new file mode 100644
index 0000000..9ed46fd
--- /dev/null
+++ b/test/_test_parse-transitions.scss
@@ -0,0 +1,41 @@
+@import "../functions/parse-transitions";
+
+@debug __parse-transitions() == null;
+@debug __parse-transitions(left) == (
+    (
+        'property': left,
+        'duration': 0s,
+        'function': ease,
+        'delay': 0s,
+    ),
+);
+@debug __parse-transitions(left 1s) == (
+    (
+        'property': left,
+        'duration': 1s,
+        'function': ease,
+        'delay': 0s,
+    ),
+);
+@debug __parse-transitions((left 1s,)) == (
+    (
+        'property': left,
+        'duration': 1s,
+        'function': ease,
+        'delay': 0s,
+    ),
+);
+@debug __parse-transitions(left 1s, top 2s) == (
+    (
+        'property': left,
+        'duration': 1s,
+        'function': ease,
+        'delay': 0s,
+    ),
+    (
+        'property': top,
+        'duration': 2s,
+        'function': ease,
+        'delay': 0s,
+    )
+);
\ No newline at end of file