mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
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:
parent
029520349a
commit
df428f62b2
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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 %>
|
||||
|
@ -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 %>
|
Loading…
Reference in New Issue
Block a user