diff --git a/src/sass/_datepicker-config.scss b/src/sass/_datepicker-config.scss
index c4d94ba6..eb7ea622 100644
--- a/src/sass/_datepicker-config.scss
+++ b/src/sass/_datepicker-config.scss
@@ -1,16 +1,16 @@
-$dayCellSize: 32px;
-$datepickerWidth: 250px;
-$datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 4px;
-$datepickerPadding: 4px;
-$datepickerZIndex: 100;
+$datepickerDayCellSize: 32px !default;
+$datepickerWidth: 250px !default;
+$datepickerMinBodyHeight: 170px !default;
+$datepickerBorderRadius: 4px !default;
+$datepickerPadding: 4px !default;
+$datepickerZIndex: 100 !default;
 
-$fontFamily: Tahoma;
-$fontSize: 14px;
+$datepickerFontFamily: Tahoma !default;
+$datepickerFontSize: 14px !default;
 
-$yearsPerRow: 4;
+$datepickerYearsPerRow: 4 !default;
 
-$textColor: (
+$datepickerTextColor: (
   button: #5cc4ef,
   otherMonth: #dedede,
   otherMonthInRange: #ccc,
@@ -19,60 +19,60 @@ $textColor: (
   common: #4a4a4a,
   dayNames: #FF9A19,
   navArrows: #9c9c9c
-);
+) !default;
 
-$bg: (
+$datepickerBG: (
   selected: #5cc4ef,
   selectedHover: darken(#5cc4ef, 5),
   inRange: rgba(#5cc4ef, .1),
   hover: #f0f0f0
-);
+) !default;
 
-$borderColor: (
+$datepickerBorderColor: (
   nav: #efefef,
   inline: #d7d7d7,
   default: #dbdbdb
-);
+) !default;
 
-$navigationHeight: 32px;
-$navigationButtonsOffset: 2px;
+$datepickerNavigationHeight: 32px !default;
+$datepickerNavigationButtonsOffset: 2px !default;
 
-$pointerSize: 10px;
-$pointerOffset: 10px;
+$datepickerPointerSize: 10px !default;
+$datepickerPointerOffset: 10px !default;
 
 // Transitions
-$transitionSpeed: .3s;
-$transitionEase: ease;
-$transitionOffset: 8px;
+$datepickerTransitionSpeed: .3s !default;
+$datepickerTransitionEase: ease !default;
+$datepickerTransitionOffset: 8px !default;
 
 // Objects
 %otherMonth {
-  color: map_get($textColor, otherMonth);
+  color: map_get($datepickerTextColor, otherMonth);
 
   &:hover {
-    color: darken(map_get($textColor, otherMonth), 10);
+    color: darken(map_get($datepickerTextColor, otherMonth), 10);
   }
 
   &.-disabled- {
     &.-focus- {
-      color: map_get($textColor, otherMonth);
+      color: map_get($datepickerTextColor, otherMonth);
     }
   }
 
   &.-selected- {
     color: #fff;
-    background: lighten(map_get($bg, selected), 15);
+    background: lighten(map_get($datepickerBG, selected), 15);
     &.-focus- {
-      background: lighten(map_get($bg, selected), 10);
+      background: lighten(map_get($datepickerBG, selected), 10);
     }
   }
   
   &.-in-range- {
-    background-color: map_get($bg, inRange);
-    color: darken(map_get($textColor, otherMonth), 7);
+    background-color: map_get($datepickerBG, inRange);
+    color: darken(map_get($datepickerTextColor, otherMonth), 7);
 
     &.-focus- {
-      background-color: rgba(map_get($bg, inRange), .2);
+      background-color: rgba(map_get($datepickerBG, inRange), .2);
     }
   }
 
diff --git a/src/sass/cell.scss b/src/sass/cell.scss
index 17478b14..9d9757d4 100644
--- a/src/sass/cell.scss
+++ b/src/sass/cell.scss
@@ -17,62 +17,62 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  height: $dayCellSize;
+  height: $datepickerDayCellSize;
   z-index: 1;
 
   &.-focus- {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-current- {
-    color: map_get($textColor, currentDate);
+    color: map_get($datepickerTextColor, currentDate);
 
     &.-focus- {
-      color: map_get($textColor, common);
+      color: map_get($datepickerTextColor, common);
     }
 
     &.-in-range- {
-      color: map_get($textColor, currentDate);
+      color: map_get($datepickerTextColor, currentDate);
     }
   }
 
   &.-in-range- {
-    background: map_get($bg, inRange);
-    color: map_get($textColor, common);
+    background: map_get($datepickerBG, inRange);
+    color: map_get($datepickerTextColor, common);
     border-radius: 0;
 
     &.-focus- {
-      background-color: rgba(map_get($bg, inRange), .2);
+      background-color: rgba(map_get($datepickerBG, inRange), .2);
     }
   }
 
   &.-disabled- {
     cursor: default;
-    color: map_get($textColor, disabled);
+    color: map_get($datepickerTextColor, disabled);
 
     &.-focus- {
-      color: map_get($textColor, disabled);
+      color: map_get($datepickerTextColor, disabled);
     }
 
     &.-in-range- {
-      color: darken(map_get($textColor, disabled), 5);
+      color: darken(map_get($datepickerTextColor, disabled), 5);
     }
 
     &.-current- {
       &.-focus- {
-        color: map_get($textColor, disabled);
+        color: map_get($datepickerTextColor, disabled);
       }
     }
   }
 
   &.-range-from- {
-    border: 1px solid rgba(map_get($bg, selected), .5);
-    background-color: map_get($bg, inRange);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+    background-color: map_get($datepickerBG, inRange);
     border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
   }
   &.-range-to- {
-    border: 1px solid rgba(map_get($bg, selected), .5);
-    background-color: map_get($bg, inRange);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+    background-color: map_get($datepickerBG, inRange);
     border-radius:  0 $datepickerBorderRadius $datepickerBorderRadius 0;
   }
 
@@ -84,15 +84,15 @@
   &.-selected- {
     color: #fff;
     border: none;
-    background: map_get($bg, selected);
+    background: map_get($datepickerBG, selected);
 
     &.-current- {
       color: #fff;
-      background: map_get($bg, selected);
+      background: map_get($datepickerBG, selected);
     }
 
     &.-focus- {
-      background: map_get($bg, selectedHover);
+      background: map_get($datepickerBG, selectedHover);
     }
   }
 
@@ -111,7 +111,7 @@
 }
 
 .datepicker--day-name {
-  color: map_get($textColor, dayNames);
+  color: map_get($datepickerTextColor, dayNames);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -164,7 +164,7 @@
 // -------------------------
 
 .datepicker--cell-year {
-  width: 100% / $yearsPerRow;
+  width: 100% / $datepickerYearsPerRow;
   height: 33.33%;
 
   &.-other-decade- {
diff --git a/src/sass/datepicker.scss b/src/sass/datepicker.scss
index be5f8fd9..67da1740 100644
--- a/src/sass/datepicker.scss
+++ b/src/sass/datepicker.scss
@@ -16,44 +16,44 @@
 
 .datepicker {
   background: #fff;
-  border: 1px solid map_get($borderColor, default);
+  border: 1px solid map_get($datepickerBorderColor, default);
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
   border-radius: $datepickerBorderRadius;
   box-sizing: content-box;
-  font-family: $fontFamily, sans-serif;
-  font-size: $fontSize;
-  color: map_get($textColor, common);
+  font-family: $datepickerFontFamily, sans-serif;
+  font-size: $datepickerFontSize;
+  color: map_get($datepickerTextColor, common);
   width: $datepickerWidth;
   position: absolute;
   left: -100000px;
   opacity: 0;
-  transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
+  transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
   z-index: $datepickerZIndex;
 
   &.-from-top- {
-    transform: translateY(-$transitionOffset);
+    transform: translateY(-$datepickerTransitionOffset);
   }
   &.-from-right- {
-    transform: translateX($transitionOffset);
+    transform: translateX($datepickerTransitionOffset);
   }
   &.-from-bottom- {
-    transform: translateY($transitionOffset);
+    transform: translateY($datepickerTransitionOffset);
   }
   &.-from-left- {
-    transform: translateX(-$transitionOffset);
+    transform: translateX(-$datepickerTransitionOffset);
   }
 
 
   &.active {
     opacity: 1;
     transform: translate(0);
-    transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
+    transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
   }
 }
 
 .datepicker-inline {
   .datepicker {
-    border-color: map-get($borderColor, inline);
+    border-color: map-get($datepickerBorderColor, inline);
     box-shadow: none;
     position: static;
     left: auto;
@@ -74,15 +74,15 @@
 
 //  Pointer
 // -------------------------------------------------
-$pointerHalfSize: $pointerSize / 2 - 1;
+$pointerHalfSize: $datepickerPointerSize / 2 - 1;
 
 .datepicker--pointer {
   position: absolute;
   background: #fff;
-  border-top: 1px solid map-get($borderColor, default);
-  border-right: 1px solid map-get($borderColor, default);
-  width: $pointerSize;
-  height: $pointerSize;
+  border-top: 1px solid map-get($datepickerBorderColor, default);
+  border-right: 1px solid map-get($datepickerBorderColor, default);
+  width: $datepickerPointerSize;
+  height: $datepickerPointerSize;
   z-index: -1;
 
   //  Main axis
@@ -112,23 +112,23 @@ $pointerHalfSize: $pointerSize / 2 - 1;
   // -------------------------
 
   .-top-left- &, .-bottom-left- & {
-    left: $pointerOffset;
+    left: $datepickerPointerOffset;
   }
   .-top-right- &, .-bottom-right- & {
-    right: $pointerOffset;
+    right: $datepickerPointerOffset;
   }
   .-top-center- &, .-bottom-center- & {
-    left: calc(50% - #{$pointerSize} / 2);
+    left: calc(50% - #{$datepickerPointerSize} / 2);
   }
 
   .-left-top- &, .-right-top- & {
-    top: $pointerOffset;
+    top: $datepickerPointerOffset;
   }
   .-left-bottom- &, .-right-bottom- & {
-    bottom: $pointerOffset;
+    bottom: $datepickerPointerOffset;
   }
   .-left-center- &, .-right-center- & {
-    top: calc(50% - #{$pointerSize} / 2);
+    top: calc(50% - #{$datepickerPointerSize} / 2);
   }
 
 }
diff --git a/src/sass/navigation.scss b/src/sass/navigation.scss
index e545d726..090a16b1 100644
--- a/src/sass/navigation.scss
+++ b/src/sass/navigation.scss
@@ -7,8 +7,8 @@
 .datepicker--nav {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid map_get($borderColor, nav);
-  min-height: $navigationHeight;
+  border-bottom: 1px solid map_get($datepickerBorderColor, nav);
+  min-height: $datepickerNavigationHeight;
   padding: $datepickerPadding;
 }
 
@@ -21,12 +21,12 @@
 }
 
 .datepicker--nav-action {
-  width: $dayCellSize;
+  width: $datepickerDayCellSize;
   border-radius: $datepickerBorderRadius;
   user-select: none;
 
   &:hover {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-disabled- {
@@ -40,7 +40,7 @@
 
   path {
     fill: none;
-    stroke: map_get($textColor, navArrows);
+    stroke: map_get($datepickerTextColor, navArrows);
     stroke-width: 2px;
   }
 }
@@ -51,12 +51,12 @@
 
   i {
     font-style: normal;
-    color: map_get($textColor, navArrows);
+    color: map_get($datepickerTextColor, navArrows);
     margin-left: 5px;
   }
 
   &:hover {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-disabled- {
@@ -71,11 +71,11 @@
 .datepicker--buttons {
   display: flex;
   padding: $datepickerPadding;
-  border-top: 1px solid map_get($borderColor, nav);
+  border-top: 1px solid map_get($datepickerBorderColor, nav);
 }
 
 .datepicker--button {
-  color: map_get($textColor, currentDate);
+  color: map_get($datepickerTextColor, currentDate);
   cursor: pointer;
   border-radius: $datepickerBorderRadius;
   flex: 1;
@@ -85,7 +85,7 @@
   height: 32px;
 
   &:hover {
-    color: map_get($textColor, common);
-    background: map_get($bg, hover);
+    color: map_get($datepickerTextColor, common);
+    background: map_get($datepickerBG, hover);
   }
 }
\ No newline at end of file
diff --git a/src/sass/timepicker.scss b/src/sass/timepicker.scss
index 21ba20c6..69a8ce33 100644
--- a/src/sass/timepicker.scss
+++ b/src/sass/timepicker.scss
@@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time {
-  border-top: 1px solid map_get($borderColor, nav);
+  border-top: 1px solid map_get($datepickerBorderColor, nav);
   display: flex;
   align-items: center;
 
@@ -108,7 +108,7 @@ $rangeThumbBg: #dedede;
 
   &:after {
     content: '';
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
     border-radius: $datepickerBorderRadius;
     position: absolute;
     left: -2px;
@@ -129,7 +129,7 @@ $rangeThumbBg: #dedede;
 .datepicker--time-current-ampm {
   text-transform: uppercase;
   align-self: flex-end;
-  color: map_get($textColor, navArrows);
+  color: map_get($datepickerTextColor, navArrows);
   margin-left: 6px;
   font-size: 11px;
   margin-bottom: 1px;
@@ -173,8 +173,8 @@ $rangeThumbBg: #dedede;
       outline: none;
 
       @include thumbSelector() {
-        background: map_get($bg, selected);
-        border-color: map_get($bg, selected);
+        background: map_get($datepickerBG, selected);
+        border-color: map_get($datepickerBG, selected);
       }
     }
 
@@ -214,7 +214,7 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time-icon {
-  color: map_get($textColor, navArrows);
+  color: map_get($datepickerTextColor, navArrows);
   border: 1px solid;
   border-radius: 50%;
   font-size: 16px;