14 --text-color: #30333a;
20 background: var(--text-color);
21 background: color(var(--text-color) shade(30%));
30 color: color(red alpha(-10%));
31 color: color(red tint(-10%)); /* lighten */
32 color: color(red shade(-10%)); /* darken */
35 color: color(red alpha(50%));
36 color: color(red hue(225));
37 color: color(red saturation(100%));
38 color: color(red lightness(50%));
40 color: gray(33); /* rgb(33, 33, 33) */
41 color: gray(33%); /* rgb(84, 84, 84) */
42 color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
43 color: #0000ff80; /* rgba(0, 0, 255, 0.5) */
45 color: hwb(90, 0%, 0%, 0.5); /* like hsl() but easier for humans */
46 color: hsl(90deg 90% 70%); /* hsl(180, 90%, 70%) -- supports deg */
47 color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
48 color: rgb(30 60 90 / 30%); /* rgba(30, 60, 90, 0.3) */
52 Also see [colorme.io](http://colorme.io/).
61 justify-content: center;
77 & .nesting { ··· } /* direct nesting starts with & */
78 @nest span & { ··· } /* complex nesting */
79 @media (min-width: 30em) { ··· }
86 @custom-selector :--button input[type='submit'], input[type='button'];
87 @custom-selector :--enter :hover, :focus;
92 :--button:--enter { ··· }
99 :any-link { ··· } /* :link, :visited */
100 p:matches(.a, .b) { ··· } /* p.a, p.b */
101 p:not(.a, .b) { ··· } /* p:not(.a), p:not(.b) */
102 a::before { ··· } /* a:before -- for IE compatibility */
103 [frame=hsides i] { ··· } /* [frame=hsides] -- but case insensitive */
109 ### Custom media queries
112 @custom-media --viewport-medium (width <= 50rem);
116 @media (--viewport-medium) { ··· }
119 ### Media query ranges
122 @media (width >= 500px) { ··· } /* (min-width: 500px) */
128 ### Property fallbacks
131 /* font-feature-settings fallback */
132 h2 { font-variant-caps: small-caps; }
133 table { font-variant-numeric: lining-nums; }
137 div { filter: blur(4px); } /* svg filter fallback */
138 div { overflow-wrap: break-word; } /* word-wrap fallback */
151 * display: -webkit-box;
152 * display: -ms-flexbox;
165 Sets animation, background, margin, padding, and so on.
170 - Based on cssnext 2.9.0.
171 - <http://cssnext.io/features/>