diff --git a/config.ru b/config.ru index f345187..7221bda 100644 --- a/config.ru +++ b/config.ru @@ -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' diff --git a/data/documentation.yml b/data/documentation.yml index d440738..e94d2a0 100644 --- a/data/documentation.yml +++ b/data/documentation.yml @@ -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 diff --git a/source/documentation/at-rules/function.html.md.erb b/source/documentation/at-rules/function.html.md.erb index c750248..407ad74 100644 --- a/source/documentation/at-rules/function.html.md.erb +++ b/source/documentation/at-rules/function.html.md.erb @@ -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 %> diff --git a/source/documentation/modules/css.html.md.erb b/source/documentation/modules/css.html.md.erb deleted file mode 100644 index e4f1733..0000000 --- a/source/documentation/modules/css.html.md.erb +++ /dev/null @@ -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 %>