danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

indentation for style-rules docs

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-05-31 12:16:59 -04:00
parent fdcb4e47d6
commit c146c76ffc
No known key found for this signature in database
4 changed files with 435 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
source/documentation/style-rules/declarations.liquid
View File

@ -60,11 +60,11 @@ property name!
{% markdown %}
## Nesting
Many CSS properties start with the same prefix that acts as a kind of namespace.
For example, `font-family`, `font-size`, and `font-weight` all start with
`font-`. Sass makes this easier and less redundant by allowing property
declarations to be nested. The outer property names are added to the inner,
separated by a hyphen.
Many CSS properties start with the same prefix that acts as a kind of
namespace. For example, `font-family`, `font-size`, and `font-weight` all
start with `font-`. Sass makes this easier and less redundant by allowing
property declarations to be nested. The outer property names are added to the
inner, separated by a hyphen.
{% endmarkdown %}
{% codeExample 'nesting' %}
@ -113,9 +113,9 @@ more explicit nested versions.
{% markdown %}
## Hidden Declarations
Sometimes you only want a property declaration to show up some of the time. If a
declaration's value is [`null`][] or an empty [unquoted string][], Sass won't
compile that declaration to CSS at all.
Sometimes you only want a property declaration to show up some of the time. If
a declaration's value is [`null`][] or an empty [unquoted string][], Sass
won't compile that declaration to CSS at all.
[`null`]: /documentation/values/null
[unquoted string]: /documentation/values/strings#unquoted
@ -136,21 +136,22 @@ $rounded-corners: false
border-radius: if($rounded-corners, 5px, null)
{% endcodeExample %}
{{ '## Custom Properties' | markdown }}
{% markdown %}
## Custom Properties
{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
{% compatibility true, '3.5.0', null, '3.5.0', 'SassScript Syntax' %}
Older versions of LibSass and Ruby Sass parsed custom property declarations just
like any other property declaration, allowing the full range of SassScript
expressions as values. Even when using these versions, it's recommended that you
use interpolation to inject SassScript values for forwards-compatibility.
Older versions of LibSass and Ruby Sass parsed custom property declarations
just like any other property declaration, allowing the full range of
SassScript expressions as values. Even when using these versions, it's
recommended that you use interpolation to inject SassScript values for
forwards-compatibility.
See [the breaking change page][] for more details.
[the breaking change page]: /documentation/breaking-changes/css-vars
{% endcompatibility %}
{% markdown %}
[CSS custom properties][], also known as CSS variables, have an unusual
declaration syntax: they allow almost any text at all in their declaration
values. What's more, those values are accessible to JavaScript, so any value
@ -159,10 +160,11 @@ normally be parsed as SassScript.
[CSS Custom Properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Because of this, Sass parses custom property declarations differently than other
property declarations. All tokens, including those that look like SassScript,
are passed through to CSS as-is. The only exception is [interpolation][], which
is the only way to inject dynamic values into a custom property.
Because of this, Sass parses custom property declarations differently than
other property declarations. All tokens, including those that look like
SassScript, are passed through to CSS as-is. The only exception is
[interpolation][], which is the only way to inject dynamic values into a
custom property.
[interpolation]: /documentation/interpolation
{% endmarkdown %}
@ -207,8 +209,8 @@ $warn: #dfa612
{% headsUp false %}
{% markdown %}
Unfortunately, [interpolation][] removes quotes from strings, which makes it
difficult to use quoted strings as values for custom properties when they come
from Sass variables. As a workaround, you can use the [`meta.inspect()`
difficult to use quoted strings as values for custom properties when they
come from Sass variables. As a workaround, you can use the [`meta.inspect()`
function][] to preserve the quotes.
[interpolation]: /documentation/interpolation

33
source/documentation/style-rules/index.liquid
View File

@ -28,24 +28,26 @@ introduction: >
But Sass wants to make your life easier. Rather than repeating the same
selectors over and over again, you can write one style rules inside another.
Sass will automatically combine the outer rule's selector with the inner rule's.
Sass will automatically combine the outer rule's selector with the inner
rule's.
{% endmarkdown %}
{% render 'code-snippets/example-nesting' %}
{% headsUp %}
Nested rules are super helpful, but they can also make it hard to visualize how
much CSS you're actually generating. The deeper you nest, the more bandwidth it
takes to serve your CSS and the more work it takes the browser to render it.
Keep those selectors shallow!
Nested rules are super helpful, but they can also make it hard to visualize
how much CSS you're actually generating. The deeper you nest, the more
bandwidth it takes to serve your CSS and the more work it takes the browser to
render it. Keep those selectors shallow!
{% endheadsUp %}
{% markdown %}
### Selector Lists
Nested rules are clever about handling selector lists (that is, comma-separated
selectors). Each complex selector (the ones between the commas) is nested
separately, and then they're combined back into a selector list.
Nested rules are clever about handling selector lists (that is,
comma-separated selectors). Each complex selector (the ones between the
commas) is nested separately, and then they're combined back into a selector
list.
{% endmarkdown %}
{% codeExample 'selector-lists' %}
@ -118,7 +120,8 @@ p
If you want to do more with your nested style rules than just combine them in
order with the descendant combinator (that is, a plain space) separating them,
Sass has your back. See the [parent selector documentation][] for more details.
Sass has your back. See the [parent selector documentation][] for more
details.
[parent selector documentation]: /documentation/style-rules/parent-selector
@ -159,16 +162,16 @@ parameters your users pass in.
{% endcodeExample %}
{% funFact %}
Sass only parses selectors *after* interpolation is resolved. This means you can
safely use interpolation to generate any part of the selector without worrying
that it won't parse.
Sass only parses selectors *after* interpolation is resolved. This means you
can safely use interpolation to generate any part of the selector without
worrying that it won't parse.
{% endfunFact %}
{% markdown %}
You can combine interpolation with the parent selector `&`, the [`@at-root`
rule][], and [selector functions][] to wield some serious power when dynamically
generating selectors. For more information, see the [parent selector
documentation][].
rule][], and [selector functions][] to wield some serious power when
dynamically generating selectors. For more information, see the [parent
selector documentation][].
[`@at-root` rule]: /documentation/at-rules/at-root
[selector functions]: /documentation/modules/selector

38
source/documentation/style-rules/parent-selector.liquid
View File

@ -56,9 +56,9 @@ behavior.
{% endcodeExample %}
{% headsUp %}
Because the parent selector could be replaced by a type selector like `h1`, it's
only allowed at the beginning of compound selectors where a type selector would
also be allowed. For example, `span&` is not allowed.
Because the parent selector could be replaced by a type selector like `h1`,
it's only allowed at the beginning of compound selectors where a type selector
would also be allowed. For example, `span&` is not allowed.
We're looking into loosening this restriction, though. If you'd like to help
make that happen, check out [this GitHub issue][].
@ -70,10 +70,10 @@ make that happen, check out [this GitHub issue][].
## Adding Suffixes
You can also use the parent selector to add extra suffixes to the outer
selector. This is particularly useful when using a methodology like [BEM][] that
uses highly structured class names. As long as the outer selector ends with an
alphanumeric name (like class, ID, and element selectors), you can use the
parent selector to append additional text.
selector. This is particularly useful when using a methodology like [BEM][]
that uses highly structured class names. As long as the outer selector ends
with an alphanumeric name (like class, ID, and element selectors), you can use
the parent selector to append additional text.
[BEM]: http://getbem.com/
{% endmarkdown %}
@ -124,9 +124,9 @@ parent selector to append additional text.
The parent selector can also be used within SassScript. It's a special
expression that returns the current parent selector in the same format used by
[selector functions][]: a comma-separated list (the selector list) that contains
space-separated lists (the complex selectors) that contain unquoted strings (the
compound selectors).
[selector functions][]: a comma-separated list (the selector list) that
contains space-separated lists (the complex selectors) that contain unquoted
strings (the compound selectors).
[selector functions]: /documentation/modules/selector#selector-values
{% endmarkdown %}
@ -147,9 +147,9 @@ compound selectors).
{% endcodeExample %}
{% markdown %}
If the `&` expression is used outside any style rules, it returns `null`. Since
`null` is [falsey][], this means you can easily use it to determine whether a
mixin is being called in a style rule or not.
If the `&` expression is used outside any style rules, it returns `null`.
Since `null` is [falsey][], this means you can easily use it to determine
whether a mixin is being called in a style rule or not.
[falsey]: /documentation/at-rules/control/if#truthiness-and-falsiness
{% endmarkdown %}
@ -160,9 +160,9 @@ mixin is being called in a style rule or not.
### Advanced Nesting
You can use `&` as a normal SassScript expression, which means you can pass it
to functions or include it in interpolation—even in other selectors! Using it in
combination with [selector functions][] and the [`@at-root` rule][] allows you
to nest selectors in very powerful ways.
to functions or include it in interpolation—even in other selectors! Using it
in combination with [selector functions][] and the [`@at-root` rule][] allows
you to nest selectors in very powerful ways.
[selector functions]: /documentation/modules/selector#selector-values
[`@at-root` rule]: /documentation/at-rules/at-root
@ -173,9 +173,9 @@ to nest selectors in very powerful ways.
{% headsUp %}
When Sass is nesting selectors, it doesn't know what interpolation was used to
generate them. This means it will automatically add the outer selector to the
inner selector *even if* you used `&` as a SassScript expression. That's why you
need to explicitly use the [`@at-root` rule][] to tell Sass not to include the
outer selector.
inner selector *even if* you used `&` as a SassScript expression. That's why
you need to explicitly use the [`@at-root` rule][] to tell Sass not to include
the outer selector.
[`@at-root` rule]: /documentation/at-rules/at-root
{% endheadsUp %}

10
source/documentation/style-rules/placeholder-selectors.liquid
View File

@ -13,8 +13,8 @@ introduction: >
{% markdown %}
What's the use of a selector that isn't emitted? It can still be [extended][]!
Unlike class selectors, placeholders don't clutter up the CSS if they aren't
extended and they don't mandate that users of a library use specific class names
for their HTML.
extended and they don't mandate that users of a library use specific class
names for their HTML.
[extended]: /documentation/at-rules/extend
{% endmarkdown %}
@ -60,7 +60,7 @@ for their HTML.
{% markdown %}
Placeholder selectors are useful when writing a Sass library where each style
rule may or may not be used. As a rule of thumb, if you're writing a stylesheet
just for your own app, it's often better to just extend a class selector if one
is available.
rule may or may not be used. As a rule of thumb, if you're writing a
stylesheet just for your own app, it's often better to just extend a class
selector if one is available.
{% endmarkdown %}