Move plain-CSS function documentation into at-rules/function

This isn't ideal, since these functions aren't defined with @function,
but there's not really a better place to put it. It certainly doesn't
make sense in the built-in module documentation anymore.
This commit is contained in:
Natalie Weizenbaum 2019-09-02 16:10:40 -07:00
parent 029520349a
commit df428f62b2
4 changed files with 40 additions and 43 deletions

View File

@ -25,6 +25,7 @@ use Rack::Rewrite do
r301 '/documentation/Sass/Script/Functions.html', '/documentation/modules'
r301 '/documentation/Sass/Script/Functions', '/documentation/modules'
r301 %r{/documentation/(Sass.*)}, 'http://www.rubydoc.info/gems/sass/$1'
r301 '/documentation/functions/css', '/documentation/at-rules/function#plain-css-functions'
r301 %r{/documentation/functions(.*)}, '/documentation/modules$1'
r301 %r{/(.+)/$}, '/$1'

View File

@ -50,7 +50,6 @@ toc:
- Boolean: /documentation/operators/boolean
- Built-In Modules: /documentation/modules
:children:
- Plain CSS: /documentation/modules/css
- Numbers: /documentation/modules/math
- Strings: /documentation/modules/string
- Colors: /documentation/modules/color

View File

@ -291,5 +291,43 @@ with [weird syntax][]).
[core library]: ../modules
[custom functions]: ../js-api#functions
[plain CSS functions]: ../modules/css
[plain CSS functions]: #plain-css-functions
[weird syntax]: ../syntax/special-functions
### Plain CSS Functions
Any function call that's not either a user-defined or [built-in](../modules)
function is compiled to a plain CSS function (unless it uses [Sass argument
syntax](../at-rules/function#arguments)). The arguments will be compiled to CSS
and included as-is in the function call. This ensures that Sass supports all CSS
functions without needing to release new versions every time a new one is added.
<% example(autogen_css: false) do %>
@debug var(--main-bg-color); // var(--main-bg-color)
$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
===
@debug var(--main-bg-color) // var(--main-bg-color)
$primary: #f2ece4
$accent: #e1d7d2
@debug radial-gradient($primary, $accent) // radial-gradient(#f2ece4, #e1d7d2)
<% end %>
<% heads_up do %>
Because any unknown function will be compiled to CSS, it's easy to miss when
you typo a function name. Consider running a [CSS linter][] on your
stylesheet's output to be notified when this happens!
[CSS linter]: https://stylelint.io/
<% end %>
<% fun_fact do %>
Some CSS functions, like `calc()` and `element()` have unusual syntax. Sass
[parses these functions specially][] as [unquoted strings][].
[parses these functions specially]: ../syntax/special-functions
[unquoted strings]: ../values/strings#unquoted
<% end %>

View File

@ -1,41 +0,0 @@
---
title: Plain CSS Functions
introduction: >
Any function call that's not either a [built-in](../modules) or
[user-defined](../at-rules/function) function is compiled to a plain CSS
function (unless it uses [Sass argument
syntax](../at-rules/function#arguments)). The arguments will be compiled to
CSS and included as-is in the function call. This ensures that Sass supports
all CSS functions without needing to release new versions every time a new one
is added.
---
<% example(autogen_css: false) do %>
@debug var(--main-bg-color); // var(--main-bg-color)
$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
===
@debug var(--main-bg-color) // var(--main-bg-color)
$primary: #f2ece4
$accent: #e1d7d2
@debug radial-gradient($primary, $accent) // radial-gradient(#f2ece4, #e1d7d2)
<% end %>
<% heads_up do %>
Because any unknown function will be compiled to CSS, it's easy to miss when
you typo a function name. Consider running a [CSS linter][] on your
stylesheet's output to be notified when this happens!
[CSS linter]: https://stylelint.io/
<% end %>
<% fun_fact do %>
Some CSS functions, like `calc()` and `element()` have unusual syntax. Sass
[parses these functions specially][] as [unquoted strings][].
[parses these functions specially]: ../syntax/special-functions
[unquoted strings]: ../values/strings#unquoted
<% end %>