mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
parent
a99bb65fd6
commit
4a02f04717
@ -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
|
||||
|
@ -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 %>
|
||||
|
@ -0,0 +1,3 @@
|
||||
<% impl_status dart: '(unreleased)', libsass: false, ruby: false do %>
|
||||
Only Dart Sass currently supports this function.
|
||||
<% end %>
|
Loading…
Reference in New Issue
Block a user