|
0
|
1 @charset "UTF-8";
|
|
|
2
|
|
|
3 /// Mixes a color with black.
|
|
|
4 ///
|
|
|
5 /// @argument {color} $color
|
|
|
6 ///
|
|
|
7 /// @argument {number (percentage)} $percent
|
|
|
8 /// The amount of black to be mixed in.
|
|
|
9 ///
|
|
|
10 /// @return {color}
|
|
|
11 ///
|
|
|
12 /// @example scss
|
|
|
13 /// .element {
|
|
|
14 /// background-color: shade(#ffbb52, 60%);
|
|
|
15 /// }
|
|
|
16 ///
|
|
|
17 /// // CSS Output
|
|
|
18 /// .element {
|
|
|
19 /// background-color: #664a20;
|
|
|
20 /// }
|
|
|
21
|
|
|
22 @function shade(
|
|
|
23 $color,
|
|
|
24 $percent
|
|
|
25 ) {
|
|
|
26
|
|
|
27 @if not _is-color($color) {
|
|
|
28 @error "`#{$color}` is not a valid color for the `$color` argument in " +
|
|
|
29 "the `shade` mixin.";
|
|
|
30 } @else {
|
|
|
31 @return mix(#000, $color, $percent);
|
|
|
32 }
|
|
|
33 }
|
