Document new built-in functions

Closes #365
This commit is contained in:
Natalie Weizenbaum 2019-09-10 17:28:10 -07:00
parent a99bb65fd6
commit 4a02f04717
3 changed files with 198 additions and 1 deletions

View File

@ -423,7 +423,7 @@ module SassHelpers
]
end
# Renders API docs for a Sass function.
# Renders API docs for a Sass function (or mixin).
#
# The function's name is parsed from the signature. The API description is
# passed as a Markdown block. If `returns` is passed, it's included as the

View File

@ -4,6 +4,99 @@ title: sass:meta
<%= partial '../snippets/built-in-module-status' %>
## Mixins
<% function 'meta.load-css($url, $with: null)' do %>
<% impl_status dart: '(unreleased)', libsass: false, ruby: false do %>
Only Dart Sass currently supports this mixin.
<% end %>
Loads the [module][] at `$url` and includes its CSS as though it were written
as the contents of this mixin. The `$with` parameter provides
[configuration][] for the modules; if it's passed, it must be a map from
variable names (without `$`) to the values of those variables to use in the
loaded module.
[module]: ../at-rules/use
[configuration]: ../at-rules/use#configuring-modules
If `$url` is relative, it's interpreted as relative to the file in which
`meta.load-css()` is included.
**Like the [`@use` rule][]**:
[`@use` rule]: ../at-rules/use
* This will only evaluate the given module once, even if it's loaded multiple
times in different ways.
* This cannot provide configuration to a module that's already been loaded,
whether or not it was already loaded with configuration.
**Unlike the [`@use` rule][]**:
* This doesn't make any members from the loaded module available in the
current module.
* This can be used anywhere in a stylesheet. It can even be nested within
style rules to create nested styles!
* The module URL being loaded can come from a variable and include
[interpolation][].
[interpolation]: ../interpolation
<% heads_up do %>
The `$url` parameter should be a string containing a URL like you'd pass to
the `@use` rule. It shouldn't be a CSS `url()`!
<% end %>
<% example(autogen_css: false) do %>
// dark-theme/_code.scss
$border-contrast: false !default;
code {
background-color: #6b717f;
color: #d2e1dd;
@if $border-contrast {
border-color: #dadbdf;
}
}
---
// style.scss
@use "sass:meta";
body.dark {
@include meta.load-css("dark-theme/code",
$with: ("border-contrast": true));
}
===
// dark-theme/_code.sass
$border-contrast: false !default
code
background-color: #6b717f
color: #d2e1dd
@if $border-contrast
border-color: #dadbdf
---
// style.sass
@use "sass:meta"
body.dark
$configuration: ("border-contrast": true)
@include meta.load-css("dark-theme/code", $with: $configuration)
===
body.dark code {
background-color: #6b717f;
color: #d2e1dd;
border-color: #dadbdf;
}
<% end %>
<% end %>
## Functions
<% function 'meta.call($function, $args...)', 'call($function, $args...)' do %>
<%= partial 'documentation/snippets/call-impl-status' %>
@ -239,6 +332,107 @@ title: sass:meta
<% end %>
<% function 'meta.module-functions($module)',
returns: 'map' do %>
<%= partial '../snippets/module-system-function-status' %>
Returns all the functions defined in a module, as a map from function names to
[function values][].
[function values]: ../values/functions
The `$module` parameter must be a string matching the namespace of a [`@use`
rule][] in the current file.
[`@use` rule]: ../at-rules/use
<% example(autogen_css: false) do %>
// _functions.scss
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
---
@use "sass:map";
@use "sass:meta";
@use "functions";
@debug meta.module-functions("functions"); // ("pow": get-function("pow"))
@debug meta.call(map.get(meta.module-variables("functions"), "pow"), 3, 4); // 16
===
// _functions.sass
@function pow($base, $exponent)
$result: 1
@for $_ from 1 through $exponent
$result: $result * $base
@return $result
---
@use "sass:map"
@use "sass:meta"
@use "functions"
@debug meta.module-functions("functions") // ("pow": get-function("pow"))
@debug meta.call(map.get(meta.module-variables("functions"), "pow"), 3, 4) // 16
<% end %>
<% end %>
<% function 'meta.module-variables($module)',
returns: 'map' do %>
<%= partial '../snippets/module-system-function-status' %>
Returns all the variables defined in a module, as a map from variable names
(without `$`) to the values of those variables.
The `$module` parameter must be a string matching the namespace of a [`@use`
rule][] in the current file.
[`@use` rule]: ../at-rules/use
<% example(autogen_css: false) do %>
// _variables.scss
$hopbush: #c69;
$midnight-blue: #036;
$wafer: #e1d7d2;
---
@use "sass:meta";
@use "variables";
@debug meta.module-variables("variables");
// (
// "hopbush": #c69,
// "midnight-blue": #036,
// "wafer": #e1d7d2
// )
===
// _variables.sass
$hopbush: #c69
$midnight-blue: #036
$wafer: #e1d7d2
---
@use "sass:meta"
@use "variables"
@debug meta.module-variables("variables")
// (
// "hopbush": #c69,
// "midnight-blue": #036,
// "wafer": #e1d7d2
// )
<% end %>
<% end %>
<% function 'meta.type-of($value)',
'type-of($value)',
returns: 'unquoted string' do %>

View File

@ -0,0 +1,3 @@
<% impl_status dart: '(unreleased)', libsass: false, ruby: false do %>
Only Dart Sass currently supports this function.
<% end %>