danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-21 21:31:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Document passing special functions to rgb() and hsl()

Browse Source 
Closes #253
This commit is contained in:
Natalie Weizenbaum 2018-12-03 18:39:07 -08:00
parent dd374df934
commit 6b015247a3
2 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
helpers/sass_helpers.rb
View File

@ -400,7 +400,7 @@ MARKDOWN
# Removes leading spaces from every non-empty line in `text` while preserving
# relative indentation.
def remove_leading_indentation(text)
text.gsub(/^#{text.scan(/^ *(?=\S)/).min}/, "")
text.gsub(/^#{text.scan(/^ *(?=\S)(?!<)/).min}/, "")
end
# A helper method that renders a chunk of Markdown text.

36
source/documentation/functions/color.html.md.erb
View File

@ -372,6 +372,24 @@ SIGNATURE
`100%` (inclusive).
[unitless]: ../values/numbers#units
<% fun_fact do %>
You can pass [special functions][] like `calc()` or `var()` in place of any
argument to `hsl()`. You can even use `var()` in place of multiple
arguments, since it might be replaced by multiple values! When a color
function is called this way, it returns an unquoted string using the same
signature it was called with.
[special functions]: ../syntax/special-functions
<% example(autogen_css: false) do %>
@debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%); // hsla(var(--peach), 20%)
===
@debug hsl(210deg 100% 20% / var(--opacity)) // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%) // hsla(var(--peach), 20%)
<% end %>
<% end %>
<% heads_up do %>
Sass's [special parsing rules][] for slash-separated values make it
@ -649,6 +667,24 @@ SIGNATURE
[unitless]: ../values/numbers#units
<% fun_fact do %>
You can pass [special functions][] like `calc()` or `var()` in place of any
argument to `rgb()`. You can even use `var()` in place of multiple
arguments, since it might be replaced by multiple values! When a color
function is called this way, it returns an unquoted string using the same
signature it was called with.
[special functions]: ../syntax/special-functions
<% example(autogen_css: false) do %>
@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)
===
@debug rgb(0 51 102 / var(--opacity)) // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2) // rgba(var(--peach), 0.2)
<% end %>
<% end %>
<% heads_up do %>
Sass's [special parsing rules][] for slash-separated values make it
difficult to pass variables for `$blue` or `$alpha` when using the