| 1 |
|
| 2 |
#color { |
| 3 |
color: rgb(34,234,24); |
| 4 |
|
| 5 |
red: red(rgb(34,234,24)); |
| 6 |
green: green(rgb(34,234,24)); |
| 7 |
blue: blue(rgb(34,234,24)); |
| 8 |
|
| 9 |
color: rgba(1,2,4, 0.5); |
| 10 |
a1: alpha(rgb(1,2,4)); |
| 11 |
a2: alpha(rgba(1,2,4, 0.5)); |
| 12 |
|
| 13 |
mix: mix(rgb(1,2,3), rgb(3,4,5)); |
| 14 |
|
| 15 |
rgba: rgba($color: #a7c, $alpha: 0.4); |
| 16 |
rgba: rgba(#a7c, 0.4); |
| 17 |
} |
| 18 |
|
| 19 |
#hsl { |
| 20 |
color: hsl(100, 50, 55); |
| 21 |
color: hsla(100, 50, 55, 0.5); |
| 22 |
|
| 23 |
hue: hue(hsl(100, 50, 55)); |
| 24 |
sat: saturation(hsl(100, 50, 55)); |
| 25 |
lig: lightness(hsl(100, 50, 55)); |
| 26 |
} |
| 27 |
|
| 28 |
#more-color { |
| 29 |
$color: hsl(-80,44,33); |
| 30 |
|
| 31 |
light: lighten($color, 10%); |
| 32 |
dark: darken($color, 10%); |
| 33 |
|
| 34 |
sat: saturate($color, 10%); |
| 35 |
desat: desaturate($color, 10%); |
| 36 |
|
| 37 |
gray: grayscale($color); |
| 38 |
comp: complement($color); |
| 39 |
inv: invert($color); |
| 40 |
} |
| 41 |
|
| 42 |
#more-more-color { |
| 43 |
$color: rgba(1,2,3,0.5); |
| 44 |
op: opacity($color); |
| 45 |
|
| 46 |
opacify: opacify($color, 0.1); |
| 47 |
opacify: fade-in($color, 0.1); |
| 48 |
|
| 49 |
transparentize: transparentize($color, 0.1); |
| 50 |
transparentize: fade-out($color, 0.1); |
| 51 |
transparentize: transparentize(#348203, 0.1); |
| 52 |
} |
| 53 |
|
| 54 |
#more-more-more-color { |
| 55 |
$color: rgba(10,10,10,0); |
| 56 |
color: adjust-color($color, $blue: 69, $red: 55, $green: 100, $alpha: 0.4); |
| 57 |
color: adjust-color($color, $hue: 170, $saturation: 100, $lightness: 50); |
| 58 |
|
| 59 |
color: change-color($color, $blue: 69, $red: 55, $green: 100, $alpha: 0.4); |
| 60 |
color: change-color($color, $hue: 170, $saturation: 100, $lightness: 50); |
| 61 |
|
| 62 |
color: scale-color($color, $red: 55%); |
| 63 |
color: scale-color($color, $red: -55%); |
| 64 |
|
| 65 |
color: scale-color($color, $lightness: 55%); |
| 66 |
color: scale-color($color, $lightness: -55%); |
| 67 |
|
| 68 |
color: ie-hex-str($color); |
| 69 |
color: ie-hex-str(#abc); |
| 70 |
} |
| 71 |
|
| 72 |
#string { |
| 73 |
color: unquote("hello what is going on"); |
| 74 |
// color: quote(yeah you know it); // ** |
| 75 |
color: quote(yeah); |
| 76 |
color: quote("I do?"); |
| 77 |
} |
| 78 |
|
| 79 |
#number { |
| 80 |
color: percentage(100/40); |
| 81 |
color: round(3.4); |
| 82 |
color: floor(3.4); |
| 83 |
color: ceil(3.4); |
| 84 |
|
| 85 |
top: floor(10.4px); |
| 86 |
top: ceil(.4ex); |
| 87 |
width: percentage(100px / 50px); |
| 88 |
bottom: abs(-10px); |
| 89 |
padding: min(5em, 3em, 4em) max(2px, 1in) min(1in, 96px) max(1in, 72pt); |
| 90 |
} |
| 91 |
|
| 92 |
#list { |
| 93 |
len: length(hello world what); |
| 94 |
len: length(thing); |
| 95 |
|
| 96 |
n: nth(hello world what, 1); |
| 97 |
// n: nth(hello world what, 100); // ** |
| 98 |
|
| 99 |
hello: join(one two three, hello, comma); |
| 100 |
hello: join(one two three, hello world what is going, comma); |
| 101 |
hello: append(one two three, hello, comma); |
| 102 |
|
| 103 |
index: index(1px solid red, solid); |
| 104 |
index: index(1px solid red, dashed); |
| 105 |
index: index(1px solid red, #f00); |
| 106 |
index: index(96px solid red, 1in); |
| 107 |
index: index((1in 2) a b, 1in); |
| 108 |
index: index((1in 2) a b, (96px 2)); |
| 109 |
index: index((1in 2) a b, (1in, 2)); |
| 110 |
index: index((1px solid red), solid); |
| 111 |
index: index(1px 3px + 3px, 4+2px); |
| 112 |
$var: oo; |
| 113 |
index: index(foo bar, f#{$var}); |
| 114 |
|
| 115 |
$yes: one, two, three; |
| 116 |
$no: great job; |
| 117 |
world: join($yes, $no); |
| 118 |
world: append($yes, $no); |
| 119 |
|
| 120 |
cool: join($yes, $no, space); |
| 121 |
cool: join($no, $yes); |
| 122 |
|
| 123 |
zip: zip((1px, 2px), (solid dashed)); |
| 124 |
zip: zip(1px 2px 3px, solid dashed, red green blue); |
| 125 |
} |
| 126 |
|
| 127 |
#introspection { |
| 128 |
t: type-of(100px); |
| 129 |
t: type-of(asdf); |
| 130 |
t: type-of("asdf"); |
| 131 |
t: type-of(true); |
| 132 |
t: type-of(#fff); |
| 133 |
t: type-of(blue); |
| 134 |
t: type-of(one two three); |
| 135 |
|
| 136 |
u: unit(12); |
| 137 |
u: unit(12px); |
| 138 |
u: unit(12em); |
| 139 |
|
| 140 |
l: unitless(23); |
| 141 |
l: unitless(23deg); |
| 142 |
|
| 143 |
c: comparable(2px, 1px); |
| 144 |
c: comparable(100px, 3em); |
| 145 |
c: comparable(10cm, 3mm); |
| 146 |
c: comparable(1, 4); |
| 147 |
c: comparable(1ex, 4em); |
| 148 |
c: comparable(2em, 5em); |
| 149 |
} |
| 150 |
|
| 151 |
#if { |
| 152 |
color: if(true, yes, no); |
| 153 |
color: if(false, yes, no); |
| 154 |
color: if(false or true, yes, no); |
| 155 |
color: if(10px, yes, no); |
| 156 |
} |
| 157 |
|
| 158 |
.transparent { |
| 159 |
r: red(transparent); |
| 160 |
g: green(transparent); |
| 161 |
b: blue(transparent); |
| 162 |
a: alpha(transparent); |
| 163 |
} |
| 164 |
|
| 165 |
.alpha { |
| 166 |
a: alpha(black); |
| 167 |
a: alpha(#fff); |
| 168 |
a: alpha(rgb(0, 0, 0)); |
| 169 |
a: alpha(rgba(0, 0, 0, 0.5)); |
| 170 |
a: alpha(currentColor); |
| 171 |
} |
| 172 |
|
