From 8ca3ee89fa4d9dccec81c56e8fd3d65a17a8c5a8 Mon Sep 17 00:00:00 2001 From: Stephen Tudor Date: Wed, 29 Oct 2014 14:57:38 -0400 Subject: [PATCH 1/5] Added color functions --- lib/compass/_functions.scss | 1 + lib/compass/functions/_colors.scss | 37 ++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 lib/compass/functions/_colors.scss diff --git a/lib/compass/_functions.scss b/lib/compass/_functions.scss index c29112e..5669e2c 100644 --- a/lib/compass/_functions.scss +++ b/lib/compass/_functions.scss @@ -3,3 +3,4 @@ @import "functions/gradient_support"; @import "functions/constants"; @import "functions/display"; +@import "functions/colors"; diff --git a/lib/compass/functions/_colors.scss b/lib/compass/functions/_colors.scss new file mode 100644 index 0000000..a3efe78 --- /dev/null +++ b/lib/compass/functions/_colors.scss @@ -0,0 +1,37 @@ +// +// A partial implementation of the Ruby colors functions from Compass: +// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb +// + +// a genericized version of lighten/darken so that negative values can be used. +@function adjust-lightness($color, $amount) { + @return adjust-color($color, $lightness: $amount); +} + +// Scales a color's lightness by some percentage. +// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter. +// This will never return a pure light or dark color unless the amount is 100%. +@function scale-lightness($color, $amount) { + @return scale-color($color, $lightness: $amount); +} + +// a genericized version of saturate/desaturate so that negative values can be used. +@function adjust-saturation($color, $amount) { + @return adjust-color($color, $saturation: $amount); +} + +// Scales a color's saturation by some percentage. +// If the amount is negative, the color is desaturated, if positive, it is saturated. +// This will never return a pure saturated or desaturated color unless the amount is 100%. +@function scale-saturation($color, $amount) { + @return scale-color($color, $saturation: $amount); +} + +@function shade($color, $percentage) { + @return mix(#000000, $color, $percentage); +} + +@function tint($color, $percentage) { + @return mix(#ffffff, $color, $percentage); +} + From 10eb970856430349bb7879a1176e5e7ab53124e6 Mon Sep 17 00:00:00 2001 From: James Cunningham Date: Thu, 22 Jan 2015 16:02:59 -0700 Subject: [PATCH 2/5] Workaround, libsass does not correctly interpolate here. --- lib/compass/typography/_vertical_rhythm.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/compass/typography/_vertical_rhythm.scss b/lib/compass/typography/_vertical_rhythm.scss index 066af3c..6e9825f 100644 --- a/lib/compass/typography/_vertical_rhythm.scss +++ b/lib/compass/typography/_vertical_rhythm.scss @@ -180,10 +180,8 @@ $base-half-leader: $base-leader / 2; @if not($relative-font-sizing) and $font-size != $base-font-size { @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; } - border-#{$side}: { - style: $border-style; - width: $font-unit * $width / $font-size; - }; + border-#{$side}-style: $border-style; + border-#{$side}-width: $font-unit * $width / $font-size; padding-#{$side}: rhythm($lines, $font-size, $offset: $width); } From 1d28493a2965bda00e3845a98394de169248d897 Mon Sep 17 00:00:00 2001 From: David Knape Date: Mon, 23 Feb 2015 21:13:49 -0800 Subject: [PATCH 3/5] Added explicit reference to functions file I was getting this error with libsass. Explicit reference to the compass functions is needed. >> may only compare numbers >> Line 19 Column 14 lib/compass-mixins/lib/compass/css3/_images.scss --- lib/compass/css3/_images.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/compass/css3/_images.scss b/lib/compass/css3/_images.scss index cb7983c..19c27b4 100644 --- a/lib/compass/css3/_images.scss +++ b/lib/compass/css3/_images.scss @@ -1,5 +1,6 @@ @import "shared"; @import "../utilities/general/hacks"; +@import "../functions"; // Background property support for vendor prefixing within values. @mixin background( From 1abae68df759efbe127a021720fdcb5f4386c0cd Mon Sep 17 00:00:00 2001 From: hashworks Date: Fri, 6 Mar 2015 13:40:37 +0100 Subject: [PATCH 4/5] Use correct argument order for single-box-shadow See [the original function documentation](http://compass-style.org/reference/compass/css3/box_shadow/#mixin-single-box-shadow). --- lib/compass/css3/_box-shadow.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compass/css3/_box-shadow.scss b/lib/compass/css3/_box-shadow.scss index 7e43836..137907f 100644 --- a/lib/compass/css3/_box-shadow.scss +++ b/lib/compass/css3/_box-shadow.scss @@ -50,13 +50,13 @@ $default-box-shadow-inset : false !default; } // Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. -// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset. +// Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset. @mixin single-box-shadow( - $color : $default-box-shadow-color, $hoff : $default-box-shadow-h-offset, $voff : $default-box-shadow-v-offset, $blur : $default-box-shadow-blur, $spread : $default-box-shadow-spread, + $color : $default-box-shadow-color, $inset : $default-box-shadow-inset ) { @if not ($inset == true or $inset == false or $inset == inset) { From 40b5135d211bb2d4d42396cfb3bc74f959ba01e3 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Fri, 6 Mar 2015 10:28:45 -0800 Subject: [PATCH 5/5] address bug with sass file reference --- lib/_animate.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/_animate.scss b/lib/_animate.scss index 9a7872d..8f78488 100644 --- a/lib/_animate.scss +++ b/lib/_animate.scss @@ -1 +1 @@ -@import "animation"; +@import "animation/animate";