danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 22:01:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Strip indentation for nested blocks

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-22 11:48:19 -04:00
parent 537f3de9e8
commit fb1dc0f834
No known key found for this signature in database
3 changed files with 114 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
source/documentation/modules/color.md
View File

@ -254,14 +254,16 @@ title: sass:color
the HSL lightness of `$color` by that amount. the HSL lightness of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `darken()` function decreases lightness by a fixed amount, which is {% stripIndent %}
often not the desired effect. To make a color a certain percentage darker The `darken()` function decreases lightness by a fixed amount, which is
than it was before, use [`color.scale()`](#scale) instead. often not the desired effect. To make a color a certain percentage darker
than it was before, use [`color.scale()`](#scale) instead.
Because `darken()` is usually not the best way to make a color darker, it's Because `darken()` is usually not the best way to make a color darker,
not included directly in the new module system. However, if you have to it's not included directly in the new module system. However, if you have
preserve the existing behavior, `darken($color, $amount)` can be written to preserve the existing behavior, `darken($color, $amount)` can be
[`color.adjust($color, $lightness: -$amount)`](#adjust). written [`color.adjust($color, $lightness: -$amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'color-darken', false %} {% codeExample 'color-darken', false %}
// #036 has lightness 20%, so when darken() subtracts 30% it just returns black. // #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@ -306,14 +308,17 @@ title: sass:color
the HSL saturation of `$color` by that amount. the HSL saturation of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `desaturate()` function decreases saturation by a fixed amount, which is {% stripIndent %}
often not the desired effect. To make a color a certain percentage less The `desaturate()` function decreases saturation by a fixed amount, which
saturated than it was before, use [`color.scale()`](#scale) instead. is often not the desired effect. To make a color a certain percentage less
saturated than it was before, use [`color.scale()`](#scale) instead.
Because `desaturate()` is usually not the best way to make a color less Because `desaturate()` is usually not the best way to make a color less
saturated, it's not included directly in the new module system. However, if saturated, it's not included directly in the new module system. However,
you have to preserve the existing behavior, `desaturate($color, $amount)` if you have to preserve the existing behavior, `desaturate($color,
can be written [`color.adjust($color, $saturation: -$amount)`](#adjust). $amount)` can be written [`color.adjust($color, $saturation:
-$amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'color-desaturate', false %} {% codeExample 'color-desaturate', false %}
// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just // #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
@ -500,14 +505,16 @@ title: sass:color
the HSL lightness of `$color` by that amount. the HSL lightness of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `lighten()` function increases lightness by a fixed amount, which is {% stripIndent %}
often not the desired effect. To make a color a certain percentage lighter The `lighten()` function increases lightness by a fixed amount, which is
than it was before, use [`scale()`](#scale) instead. often not the desired effect. To make a color a certain percentage lighter
than it was before, use [`scale()`](#scale) instead.
Because `lighten()` is usually not the best way to make a color lighter, Because `lighten()` is usually not the best way to make a color lighter,
it's not included directly in the new module system. However, if you have to it's not included directly in the new module system. However, if you have
preserve the existing behavior, `lighten($color, $amount)` can be written to preserve the existing behavior, `lighten($color, $amount)` can be
[`adjust($color, $lightness: $amount)`](#adjust). written [`adjust($color, $lightness: $amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'color-lighten', false %} {% codeExample 'color-lighten', false %}
// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white. // #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@ -599,14 +606,17 @@ title: sass:color
alpha channel of `$color` by that amount. alpha channel of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `opacify()` function increases the alpha channel by a fixed amount, {% stripIndent %}
which is often not the desired effect. To make a color a certain percentage The `opacify()` function increases the alpha channel by a fixed amount,
more opaque than it was before, use [`scale()`](#scale) instead. which is often not the desired effect. To make a color a certain
percentage more opaque than it was before, use [`scale()`](#scale)
instead.
Because `opacify()` is usually not the best way to make a color more opaque, Because `opacify()` is usually not the best way to make a color more
it's not included directly in the new module system. However, if you have to opaque, it's not included directly in the new module system. However, if
preserve the existing behavior, `opacify($color, $amount)` can be written you have to preserve the existing behavior, `opacify($color, $amount)` can
[`adjust($color, $alpha: -$amount)`](#adjust). be written [`adjust($color, $alpha: -$amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'color-opacify', false %} {% codeExample 'color-opacify', false %}
// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully // rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
@ -668,14 +678,16 @@ title: sass:color
the HSL saturation of `$color` by that amount. the HSL saturation of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `saturate()` function increases saturation by a fixed amount, which is {% stripIndent %}
often not the desired effect. To make a color a certain percentage more The `saturate()` function increases saturation by a fixed amount, which is
saturated than it was before, use [`scale()`](#scale) instead. often not the desired effect. To make a color a certain percentage more
saturated than it was before, use [`scale()`](#scale) instead.
Because `saturate()` is usually not the best way to make a color more Because `saturate()` is usually not the best way to make a color more
saturated, it's not included directly in the new module system. However, if saturated, it's not included directly in the new module system. However,
you have to preserve the existing behavior, `saturate($color, $amount)` can if you have to preserve the existing behavior, `saturate($color, $amount)`
be written [`adjust($color, $saturation: $amount)`](#adjust). can be written [`adjust($color, $saturation: $amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'color-saturate', false %} {% codeExample 'color-saturate', false %}
// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes // #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
@ -791,16 +803,18 @@ title: sass:color
alpha channel of `$color` by that amount. alpha channel of `$color` by that amount.
{% headsUp %} {% headsUp %}
The `transparentize()` function decreases the alpha channel by a fixed {% stripIndent %}
amount, which is often not the desired effect. To make a color a certain The `transparentize()` function decreases the alpha channel by a fixed
percentage more transparent than it was before, use amount, which is often not the desired effect. To make a color a certain
[`color.scale()`](#scale) instead. percentage more transparent than it was before, use
[`color.scale()`](#scale) instead.
Because `transparentize()` is usually not the best way to make a color more Because `transparentize()` is usually not the best way to make a color
transparent, it's not included directly in the new module system. However, more transparent, it's not included directly in the new module system.
if you have to preserve the existing behavior, `transparentize($color, However, if you have to preserve the existing behavior,
$amount)` can be written [`color.adjust($color, $alpha: `transparentize($color, $amount)` can be written [`color.adjust($color,
-$amount)`](#adjust). $alpha: -$amount)`](#adjust).
{% endstripIndent %}
{% codeExample 'transparentize', false %} {% codeExample 'transparentize', false %}
// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it // rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it

118
source/documentation/modules/index.liquid → source/documentation/modules/index.md
View File

@ -48,42 +48,40 @@ introduction: >
border: 1px solid color.scale($primary-color, $lightness: 20%) border: 1px solid color.scale($primary-color, $lightness: 20%)
{% endcodeExample %} {% endcodeExample %}
{% markdown %} Sass provides the following built-in modules:
Sass provides the following built-in modules:
* The [`sass:math` module][] provides functions that operate on [numbers][]. * The [`sass:math` module][] provides functions that operate on [numbers][].
* The [`sass:string` module][] makes it easy to combine, search, or split * The [`sass:string` module][] makes it easy to combine, search, or split apart
apart [strings][]. [strings][].
* The [`sass:color` module][] generates new [colors][] based on existing ones, * The [`sass:color` module][] generates new [colors][] based on existing ones,
making it easy to build color themes. making it easy to build color themes.
* The [`sass:list` module][] lets you access and modify values in [lists][]. * The [`sass:list` module][] lets you access and modify values in [lists][].
* The [`sass:map` module][] makes it possible to look up the value associated * The [`sass:map` module][] makes it possible to look up the value associated
with a key in a [map][], and much more. with a key in a [map][], and much more.
* The [`sass:selector` module][] provides access to Sass's powerful selector * The [`sass:selector` module][] provides access to Sass's powerful selector
engine. engine.
* The [`sass:meta` module][] exposes the details of Sass's inner workings. * The [`sass:meta` module][] exposes the details of Sass's inner workings.
[`sass:math` module]: /documentation/modules/math [`sass:math` module]: /documentation/modules/math
[numbers]: /documentation/values/numbers [numbers]: /documentation/values/numbers
[`sass:string` module]: /documentation/modules/string [`sass:string` module]: /documentation/modules/string
[strings]: /documentation/values/strings [strings]: /documentation/values/strings
[`sass:color` module]: /documentation/modules/color [`sass:color` module]: /documentation/modules/color
[colors]: /documentation/values/colors [colors]: /documentation/values/colors
[`sass:list` module]: /documentation/modules/list [`sass:list` module]: /documentation/modules/list
[lists]: /documentation/values/lists [lists]: /documentation/values/lists
[`sass:map` module]: /documentation/modules/map [`sass:map` module]: /documentation/modules/map
[map]: /documentation/values/maps [map]: /documentation/values/maps
[`sass:selector` module]: /documentation/modules/selector [`sass:selector` module]: /documentation/modules/selector
[`sass:meta` module]: /documentation/modules/meta [`sass:meta` module]: /documentation/modules/meta
## Global Functions ## Global Functions
{% endmarkdown %}
{% function 'hsl($hue $saturation $lightness)', 'hsl($hue $saturation $lightness / $alpha)', 'hsl($hue, $saturation, $lightness, $alpha: 1)', 'hsla($hue $saturation $lightness)', 'hsla($hue $saturation $lightness / $alpha)', 'hsla($hue, $saturation, $lightness, $alpha: 1)', 'returns:color' %} {% function 'hsl($hue $saturation $lightness)', 'hsl($hue $saturation $lightness / $alpha)', 'hsl($hue, $saturation, $lightness, $alpha: 1)', 'hsla($hue $saturation $lightness)', 'hsla($hue $saturation $lightness / $alpha)', 'hsla($hue, $saturation, $lightness, $alpha: 1)', 'returns:color' %}
{% compatibility 'dart: "1.15.0"', 'libsass: false', 'ruby: false', 'feature: "Level 4 Syntax"' %} {% compatibility 'dart: "1.15.0"', 'libsass: false', 'ruby: false', 'feature: "Level 4 Syntax"' %}
@ -102,21 +100,19 @@ introduction: >
as percentages. as percentages.
{% endcompatibility %} {% endcompatibility %}
{% markdown %} Returns a color with the given [hue, saturation, and lightness][] and the
Returns a color with the given [hue, saturation, and lightness][] and the given alpha channel.
given alpha channel.
[hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV [hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV
The hue is a number between `0deg` and `360deg` (inclusive) and may be The hue is a number between `0deg` and `360deg` (inclusive) and may be
unitless. The saturation and lightness are numbers between `0%` and `100%` unitless. The saturation and lightness are numbers between `0%` and `100%`
(inclusive) and may *not* be unitless. The alpha channel can be specified as (inclusive) and may *not* be unitless. The alpha channel can be specified as
either a unitless number between 0 and 1 (inclusive), or a percentage either a unitless number between 0 and 1 (inclusive), or a percentage between
between `0%` and `100%` (inclusive). `0%` and `100%` (inclusive).
{% endmarkdown %}
{% funFact false %} {% funFact %}
{% markdown %} {% stripIndent %}
You can pass [special functions][] like `calc()` or `var()` in place of You can pass [special functions][] like `calc()` or `var()` in place of
any argument to `hsl()`. You can even use `var()` in place of multiple any argument to `hsl()`. You can even use `var()` in place of multiple
arguments, since it might be replaced by multiple values! When a color arguments, since it might be replaced by multiple values! When a color
@ -124,7 +120,7 @@ introduction: >
signature it was called with. signature it was called with.
[special functions]: /documentation/syntax/special-functions [special functions]: /documentation/syntax/special-functions
{% endmarkdown %} {% endstripIndent %}
{% codeExample 'hsl-special', false %} {% codeExample 'hsl-special', false %}
@debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity)) @debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@ -158,15 +154,13 @@ introduction: >
{% endfunction %} {% endfunction %}
{% function 'if($condition, $if-true, $if-false)' %} {% function 'if($condition, $if-true, $if-false)' %}
{% markdown %} Returns `$if-true` if `$condition` is [truthy][], and `$if-false` otherwise.
Returns `$if-true` if `$condition` is [truthy][], and `$if-false` otherwise.
This function is special in that it doesn't even evaluate the argument that This function is special in that it doesn't even evaluate the argument that
isn't returned, so it's safe to call even if the unused argument would throw isn't returned, so it's safe to call even if the unused argument would throw
an error. an error.
[truthy]: /documentation/at-rules/control/if#truthiness-and-falsiness [truthy]: /documentation/at-rules/control/if#truthiness-and-falsiness
{% endmarkdown %}
{% codeExample 'debug', false %} {% codeExample 'debug', false %}
@debug if(true, 10px, 15px); // 10px @debug if(true, 10px, 15px); // 10px
@ -197,20 +191,18 @@ introduction: >
as percentages. as percentages.
{% endcompatibility %} {% endcompatibility %}
{% markdown %} If `$red`, `$green`, `$blue`, and optionally `$alpha` are passed, returns a
If `$red`, `$green`, `$blue`, and optionally `$alpha` are passed, returns a color with the given red, green, blue, and alpha channels.
color with the given red, green, blue, and alpha channels.
Each channel can be specified as either a [unitless][] number between 0 and Each channel can be specified as either a [unitless][] number between 0 and
255 (inclusive), or a percentage between `0%` and `100%` (inclusive). The 255 (inclusive), or a percentage between `0%` and `100%` (inclusive). The
alpha channel can be specified as either a unitless number between 0 and 1 alpha channel can be specified as either a unitless number between 0 and 1
(inclusive), or a percentage between `0%` and `100%` (inclusive). (inclusive), or a percentage between `0%` and `100%` (inclusive).
[unitless]: /documentation/values/numbers#units [unitless]: /documentation/values/numbers#units
{% endmarkdown %}
{% funFact false %} {% funFact %}
{% markdown %} {% stripIndent %}
You can pass [special functions][] like `calc()` or `var()` in place of You can pass [special functions][] like `calc()` or `var()` in place of
any argument to `rgb()`. You can even use `var()` in place of multiple any argument to `rgb()`. You can even use `var()` in place of multiple
arguments, since it might be replaced by multiple values! When a color arguments, since it might be replaced by multiple values! When a color
@ -218,7 +210,7 @@ introduction: >
signature it was called with. signature it was called with.
[special functions]: /documentation/syntax/special-functions [special functions]: /documentation/syntax/special-functions
{% endmarkdown %} {% endstripIndent %}
{% codeExample 'rgb-special', false %} {% codeExample 'rgb-special', false %}
@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity)) @debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@ -250,12 +242,10 @@ introduction: >
@debug rgba(95%, 92.5%, 89.5%, 0.2) // rgba(242, 236, 228, 0.2) @debug rgba(95%, 92.5%, 89.5%, 0.2) // rgba(242, 236, 228, 0.2)
{% endcodeExample %} {% endcodeExample %}
{{ '---' | markdown }} ---
{% markdown %} If `$color` and `$alpha` are passed, this returns `$color` with the given
If `$color` and `$alpha` are passed, this returns `$color` with the given `$alpha` channel instead of its original alpha channel.
`$alpha` channel instead of its original alpha channel.
{% endmarkdown %}
{% codeExample 'color-and-alpha', false %} {% codeExample 'color-and-alpha', false %}
@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5); @debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);

4
source/helpers/components/index.ts
View File

@ -18,7 +18,7 @@ export {getDocTocData, getToc};
export const funFact = async (contents: string, useMarkdown = true) => { export const funFact = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('fun_fact', { const html = await liquidEngine.renderFile('fun_fact', {
// Un-indent nested markup to prevent unwanted `<p>` tags. // Un-indent nested markup to prevent unwanted `<p>` tags.
contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'), contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
useMarkdown, useMarkdown,
}); });
return html.trim(); return html.trim();
@ -31,7 +31,7 @@ export const funFact = async (contents: string, useMarkdown = true) => {
export const headsUp = async (contents: string, useMarkdown = true) => { export const headsUp = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('heads_up', { const html = await liquidEngine.renderFile('heads_up', {
// Un-indent nested markup to prevent unwanted `<p>` tags. // Un-indent nested markup to prevent unwanted `<p>` tags.
contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'), contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
useMarkdown, useMarkdown,
}); });
return html.trim(); return html.trim();