mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 09:57:35 +01:00
78 lines
2.9 KiB
Plaintext
78 lines
2.9 KiB
Plaintext
|
---
|
||
|
|
title: Colors
|
||
|
|
---
|
||
|
|
|
||
|
|
<% impl_status dart: '1.14.0', libsass: '3.6.0', ruby: '3.6.0' do %>
|
||
|
|
Support for [hex colors with an alpha channel][] is not supported by LibSass or
|
||
|
|
older versions of Dart or Ruby Sass.
|
||
|
|
|
||
|
|
[hex colors with an alpha channel]: https://drafts.csswg.org/css-color/#hex-notation
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
Sass has built-in support for color values. Just like CSS colors, they represent
|
||
|
|
points in the [sRGB color space][], although many Sass [color functions][]
|
||
|
|
operate in the [HSL color space][] as well. Sass colors can be written as hex
|
||
|
|
codes (`#f2ece4` or `#b37399aa`), [CSS color names][] (`midnightblue`,
|
||
|
|
`transparent`), or the functions [`rgb()`][], [`rgba()`][], [`hsl()`][], and
|
||
|
|
[`hsla()`][].
|
||
|
|
|
||
|
|
[sRGB color space]: https://en.wikipedia.org/wiki/SRGB
|
||
|
|
[color functions]: ../functions/colors
|
||
|
|
[HSL color space]: https://en.wikipedia.org/wiki/HSL_and_HSV
|
||
|
|
[CSS color names]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords
|
||
|
|
[`rgb()`]: ../functions/colors#rgb
|
||
|
|
[`rgba()`]: ../functions/colors#rgba
|
||
|
|
[`hsl()`]: ../functions/colors#hsl
|
||
|
|
[`hsla()`]: ../functions/colors#hsla
|
||
|
|
|
||
|
|
<% example(autogen_css: false) do %>
|
||
|
|
@debug #f2ece4; // #f2ece4
|
||
|
|
@debug #b37399aa; // rgba(179, 115, 153, 67%)
|
||
|
|
@debug midnightblue; // #191970
|
||
|
|
@debug rgb(204, 102, 153); // #c69
|
||
|
|
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
|
||
|
|
@debug hsl(228, 7%, 86%); // #dadbdf
|
||
|
|
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)
|
||
|
|
===
|
||
|
|
@debug #f2ece4 // #f2ece4
|
||
|
|
@debug #b37399aa // rgba(179, 115, 153, 67%)
|
||
|
|
@debug midnightblue // #191970
|
||
|
|
@debug rgb(204, 102, 153) // #c69
|
||
|
|
@debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8)
|
||
|
|
@debug hsl(228, 7%, 86%) // #dadbdf
|
||
|
|
@debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7)
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
<% fun_fact do %>
|
||
|
|
No matter how a Sass color is originally written, it can be used with both
|
||
|
|
HSL-based and RGB-based functions!
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
CSS supports many different formats that can all represent the same color: its
|
||
|
|
name, its hex code, and [functional notation][]. Which format Sass chooses to
|
||
|
|
compile a color to depends on the color itself, how it was written in the
|
||
|
|
original stylesheet, and the current output mode. Because it can vary so much,
|
||
|
|
stylesheet authors shouldn't rely on any particular output format for colors
|
||
|
|
they write.
|
||
|
|
|
||
|
|
[functional notation]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
|
||
|
|
|
||
|
|
Sass supports many useful [color functions][] that can be used to create new
|
||
|
|
colors based on existing ones by [mixing colors together][] or [scaling their
|
||
|
|
hue, saturation, or lightness][].
|
||
|
|
|
||
|
|
[mixing colors together]: ../functions/colors#mix
|
||
|
|
[scaling their hue, saturation, or lightness]: ../functions/colors#scale-color
|
||
|
|
|
||
|
|
<% example(autogen_css: false) do %>
|
||
|
|
$venus: #998099;
|
||
|
|
|
||
|
|
@debug scale-color($venus, $lightness: +15%); // #a893a8
|
||
|
|
@debug mix($venus, midnightblue); // #594d85
|
||
|
|
===
|
||
|
|
$venus: #998099
|
||
|
|
|
||
|
|
@debug scale-color($venus, $lightness: +15%) // #a893a8
|
||
|
|
@debug mix($venus, midnightblue) // #594d85
|
||
|
|
<% end %>
|