Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

updated to work with new SASS format and replaced deprecated ||= with…

… !default
  • Loading branch information...
commit 53e4713ca5c8699ba2787e07a35f235461a99ab2 1 parent e223c13
@manewitz authored
View
42 example/src/_split_compliment_theme.sass
@@ -2,27 +2,27 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color ||= red
-!complement_support_color = adjust_hue(!base_color, 180 + 30)
-!complement_accent_color = adjust_hue(!base_color, 180 - 30)
+$base_color: red !default
+$complement_support_color: adjust_hue($base_color, 180 + 30)
+$complement_accent_color: adjust_hue($base_color, 180 - 30)
-!base_dark_color = darken(!base_color, 25)
-!base_darker_color = darken(!base_color, 50)
-!base_darkest_color = darken(!base_color, 75)
-!base_light_color = lighten(!base_color, 25)
-!base_lighter_color = lighten(!base_color, 50)
-!base_lightest_color = lighten(!base_color, 75)
+$base_dark_color: darken($base_color, 25)
+$base_darker_color: darken($base_color, 50)
+$base_darkest_color: darken($base_color, 75)
+$base_light_color: lighten($base_color, 25)
+$base_lighter_color: lighten($base_color, 50)
+$base_lightest_color: lighten($base_color, 75)
-!dark_complement_support_color = darken(!complement_support_color, 25)
-!darker_complement_support_color = darken(!complement_support_color, 50)
-!darkest_complement_support_color = darken(!complement_support_color, 75)
-!light_complement_support_color = lighten(!complement_support_color, 25)
-!lighter_complement_support_color = lighten(!complement_support_color, 50)
-!lightest_complement_support_color = lighten(!complement_support_color, 75)
+$dark_complement_support_color: darken($complement_support_color, 25)
+$darker_complement_support_color: darken($complement_support_color, 50)
+$darkest_complement_support_color: darken($complement_support_color, 75)
+$light_complement_support_color: lighten($complement_support_color, 25)
+$lighter_complement_support_color: lighten($complement_support_color, 50)
+$lightest_complement_support_color: lighten($complement_support_color, 75)
-!dark_complement_accent_color = darken(!complement_accent_color, 25)
-!darker_complement_accent_color = darken(!complement_accent_color, 50)
-!darkest_complement_accent_color = darken(!complement_accent_color, 75)
-!light_complement_accent_color = lighten(!complement_accent_color, 25)
-!lighter_complement_accent_color = lighten(!complement_accent_color, 50)
-!lightest_complement_accent_color = lighten(!complement_accent_color, 75)
+$dark_complement_accent_color: darken($complement_accent_color, 25)
+$darker_complement_accent_color: darken($complement_accent_color, 50)
+$darkest_complement_accent_color: darken($complement_accent_color, 75)
+$light_complement_accent_color: lighten($complement_accent_color, 25)
+$lighter_complement_accent_color: lighten($complement_accent_color, 50)
+$lightest_complement_accent_color: lighten($complement_accent_color, 75)
View
22 example/src/screen.sass
@@ -1,6 +1,6 @@
@import compass/utilities.sass
-// We can change the theme color here by pre-setting the !base_color
-!base_color = #614DA3
+// We can change the theme color here by pre-setting the $base_color
+$base_color = #614DA3
@import split_compliment_theme.sass
html
@@ -10,23 +10,23 @@ body#split-compliment
:margin 0
:height 100%
.base
- :background-color = !base_color
+ :background-color = $base_color
.darker
- :background-color = !base_dark_color
+ :background-color = $base_dark_color
.lighter
- :background-color = !base_light_color
+ :background-color = $base_light_color
.complement-support
- :background-color = !complement_support_color
+ :background-color = $complement_support_color
.darker
- :background-color = !dark_complement_support_color
+ :background-color = $dark_complement_support_color
.lighter
- :background-color = !light_complement_support_color
+ :background-color = $light_complement_support_color
.complement-accent
- :background-color = !complement_accent_color
+ :background-color = $complement_accent_color
.darker
- :background-color = !dark_complement_accent_color
+ :background-color = $dark_complement_accent_color
.lighter
- :background-color = !light_complement_accent_color
+ :background-color = $light_complement_accent_color
.base, .complement-support, .complement-accent
+clearfix
:height 33%
View
42 templates/analogous/_theme.sass
@@ -2,27 +2,27 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color ||= red
-!support_color = adjust_hue(!base_color, 30)
-!accent_color = adjust_hue(!base_color, -30)
+$base_color: red !default
+$support_color: adjust_hue($base_color, 30)
+$accent_color: adjust_hue($base_color, -30)
-!dark_base_color = darken(!base_color, 25)
-!darker_base_color = darken(!base_color, 50)
-!darkest_base_color = darken(!base_color, 75)
-!light_base_color = lighten(!base_color, 25)
-!lighter_base_color = lighten(!base_color, 50)
-!lightest_base_color = lighten(!base_color, 75)
+$dark_base_color: darken($base_color, 25)
+$darker_base_color: darken($base_color, 50)
+$darkest_base_color: darken($base_color, 75)
+$light_base_color: lighten($base_color, 25)
+$lighter_base_color: lighten($base_color, 50)
+$lightest_base_color: lighten($base_color, 75)
-!dark_support_color = darken(!support_color, 25)
-!darker_support_color = darken(!support_color, 50)
-!darkest_support_color = darken(!support_color, 75)
-!light_support_color = lighten(!support_color, 25)
-!lighter_support_color = lighten(!support_color, 50)
-!lightest_support_color = lighten(!support_color, 75)
+$dark_support_color: darken($support_color, 25)
+$darker_support_color: darken($support_color, 50)
+$darkest_support_color: darken($support_color, 75)
+$light_support_color: lighten($support_color, 25)
+$lighter_support_color: lighten($support_color, 50)
+$lightest_support_color: lighten($support_color, 75)
-!dark_accent_color = darken(!accent_color, 25)
-!darker_accent_color = darken(!accent_color, 50)
-!darkest_accent_color = darken(!accent_color, 75)
-!light_accent_color = lighten(!accent_color, 25)
-!lighter_accent_color = lighten(!accent_color, 50)
-!lightest_accent_color = lighten(!accent_color, 75)
+$dark_accent_color: darken($accent_color, 25)
+$darker_accent_color: darken($accent_color, 50)
+$darkest_accent_color: darken($accent_color, 75)
+$light_accent_color: lighten($accent_color, 25)
+$lighter_accent_color: lighten($accent_color, 50)
+$lightest_accent_color: lighten($accent_color, 75)
View
15 templates/basic/_theme.sass
@@ -1,7 +1,8 @@
-!base_color ||= red
-!dark_base_color = darken(!base_color, 25)
-!darker_base_color = darken(!base_color, 50)
-!darkest_base_color = darken(!base_color, 75)
-!light_base_color = lighten(!base_color, 25)
-!lighter_base_color = lighten(!base_color, 75)
-!lightest_base_color = lighten(!base_color, 50)
+$base_color: red !default
+
+$dark_base_color: darken($base_color, 25)
+$darker_base_color: darken($base_color, 50)
+$darkest_base_color: darken($base_color, 75)
+$light_base_color: lighten($base_color, 25)
+$lighter_base_color: lighten($base_color, 75)
+$lightest_base_color: lighten($base_color, 50)
View
28 templates/complementary/_theme.sass
@@ -2,19 +2,19 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color ||= red
-!complementary_color = complement(!base_color)
+$base_color: red !default
+$complementary_color: complement($base_color)
-!dark_base_color = darken(!base_color, 25)
-!darker_base_color = darken(!base_color, 50)
-!darkest_base_color = darken(!base_color, 75)
-!light_base_color = lighten(!base_color, 25)
-!lighter_base_color = lighten(!base_color, 50)
-!lightest_base_color = lighten(!base_color, 75)
+$dark_base_color: darken($base_color, 25)
+$darker_base_color: darken($base_color, 50)
+$darkest_base_color: darken($base_color, 75)
+$light_base_color: lighten($base_color, 25)
+$lighter_base_color: lighten($base_color, 50)
+$lightest_base_color: lighten($base_color, 75)
-!dark_complementary_color = darken(!complementary_color, 25)
-!darker_complementary_color = darken(!complementary_color, 50)
-!darkest_complementary_color = darken(!complementary_color, 75)
-!light_complementary_color = lighten(!complementary_color, 25)
-!lighter_complementary_color = lighten(!complementary_color, 50)
-!lightest_complementary_color = lighten(!complementary_color, 75)
+$dark_complementary_color: darken($complementary_color, 25)
+$darker_complementary_color: darken($complementary_color, 50)
+$darkest_complementary_color: darken($complementary_color, 75)
+$light_complementary_color: lighten($complementary_color, 25)
+$lighter_complementary_color: lighten($complementary_color, 50)
+$lightest_complementary_color: lighten($complementary_color, 75)
View
42 templates/split_complement/_theme.sass
@@ -2,27 +2,27 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color ||= red
-!complement_support_color = adjust_hue(!base_color, 180 + 30)
-!complement_accent_color = adjust_hue(!base_color, 180 - 30)
+$base_color: red !default
+$complement_support_color: adjust_hue($base_color, 180 + 30)
+$complement_accent_color: adjust_hue($base_color, 180 - 30)
-!dark_base_color = darken(!base_color, 25)
-!darker_base_color = darken(!base_color, 50)
-!darkest_base_color = darken(!base_color, 75)
-!light_base_color = lighten(!base_color, 25)
-!lighter_base_color = lighten(!base_color, 50)
-!lightest_base_color = lighten(!base_color, 75)
+$dark_base_color: darken($base_color, 25)
+$darker_base_color: darken($base_color, 50)
+$darkest_base_color: darken($base_color, 75)
+$light_base_color: lighten($base_color, 25)
+$lighter_base_color: lighten($base_color, 50)
+$lightest_base_color: lighten($base_color, 75)
-!dark_complement_support_color = darken(!complement_support_color, 25)
-!darker_complement_support_color = darken(!complement_support_color, 50)
-!darkest_complement_support_color = darken(!complement_support_color, 75)
-!light_complement_support_color = lighten(!complement_support_color, 25)
-!lighter_complement_support_color = lighten(!complement_support_color, 50)
-!lightest_complement_support_color = lighten(!complement_support_color, 75)
+$dark_complement_support_color: darken($complement_support_color, 25)
+$darker_complement_support_color: darken($complement_support_color, 50)
+$darkest_complement_support_color: darken($complement_support_color, 75)
+$light_complement_support_color: lighten($complement_support_color, 25)
+$lighter_complement_support_color: lighten($complement_support_color, 50)
+$lightest_complement_support_color: lighten($complement_support_color, 75)
-!dark_complement_accent_color = darken(!complement_accent_color, 25)
-!darker_complement_accent_color = darken(!complement_accent_color, 50)
-!darkest_complement_accent_color = darken(!complement_accent_color, 75)
-!light_complement_accent_color = lighten(!complement_accent_color, 25)
-!lighter_complement_accent_color = lighten(!complement_accent_color, 50)
-!lightest_complement_accent_color = lighten(!complement_accent_color, 75)
+$dark_complement_accent_color: darken($complement_accent_color, 25)
+$darker_complement_accent_color: darken($complement_accent_color, 50)
+$darkest_complement_accent_color: darken($complement_accent_color, 75)
+$light_complement_accent_color: lighten($complement_accent_color, 25)
+$lighter_complement_accent_color: lighten($complement_accent_color, 50)
+$lightest_complement_accent_color: lighten($complement_accent_color, 75)
View
42 templates/triadic/_theme.sass
@@ -2,27 +2,27 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color ||= red
-!support_color = adjust_hue(!base_color, 120)
-!accent_color = adjust_hue(!base_color, -120)
+$base_color: red !default
+$support_color: adjust_hue($base_color, 120)
+$accent_color: adjust_hue($base_color, -120)
-!dark_base_color = darken(!base_color, 25)
-!darker_base_color = darken(!base_color, 50)
-!darkest_base_color = darken(!base_color, 75)
-!light_base_color = lighten(!base_color, 25)
-!lighter_base_color = lighten(!base_color, 50)
-!lightest_base_color = lighten(!base_color, 75)
+$dark_base_color: darken($base_color, 25)
+$darker_base_color: darken($base_color, 50)
+$darkest_base_color: darken($base_color, 75)
+$light_base_color: lighten($base_color, 25)
+$lighter_base_color: lighten($base_color, 50)
+$lightest_base_color: lighten($base_color, 75)
-!dark_support_color = darken(!support_color, 25)
-!darker_support_color = darken(!support_color, 50)
-!darkest_support_color = darken(!support_color, 75)
-!light_support_color = lighten(!support_color, 25)
-!lighter_support_color = lighten(!support_color, 50)
-!lightest_support_color = lighten(!support_color, 75)
+$dark_support_color: darken($support_color, 25)
+$darker_support_color: darken($support_color, 50)
+$darkest_support_color: darken($support_color, 75)
+$light_support_color: lighten($support_color, 25)
+$lighter_support_color: lighten($support_color, 50)
+$lightest_support_color: lighten($support_color, 75)
-!dark_accent_color = darken(!accent_color, 25)
-!darker_accent_color = darken(!accent_color, 50)
-!darkest_accent_color = darken(!accent_color, 75)
-!light_accent_color = lighten(!accent_color, 25)
-!lighter_accent_color = lighten(!accent_color, 50)
-!lightest_accent_color = lighten(!accent_color, 75)
+$dark_accent_color: darken($accent_color, 25)
+$darker_accent_color: darken($accent_color, 50)
+$darkest_accent_color: darken($accent_color, 75)
+$light_accent_color: lighten($accent_color, 25)
+$lighter_accent_color: lighten($accent_color, 50)
+$lightest_accent_color: lighten($accent_color, 75)
Please sign in to comment.
Something went wrong with that request. Please try again.