mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-25 04:22:22 -06:00
154 lines
2.4 KiB
Markdown
154 lines
2.4 KiB
Markdown
# declaration-nested-properties
|
|
|
|
Require or disallow properties with `-` in their names to be in a form of a nested group.
|
|
|
|
```scss
|
|
/* This is properties nesting: */
|
|
font: {
|
|
size: 16px;
|
|
weight: 700;
|
|
}
|
|
```
|
|
|
|
[Sass official docs on nested properties](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties).
|
|
|
|
## Options
|
|
|
|
`string`: `"always"|"never"`
|
|
|
|
### `"always"`
|
|
|
|
*Every property* with a `-` in its name *must be* inside a nested property group.
|
|
|
|
Property names with browser prefixes are ignored with `always`.
|
|
|
|
The following patterns are considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
margin-left: 10px;
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
font: {
|
|
size: 10px;
|
|
}
|
|
font-weight: 400; // This one should be nested either
|
|
}
|
|
```
|
|
|
|
The following patterns are *not* considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
margin: {
|
|
left: 10px;
|
|
}
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
font: 10px/1.1 Arial {
|
|
weight: bold;
|
|
}
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
-webkit-box-sizing: border-box;
|
|
-webkit-box-shadow: 1px 0 0 red;
|
|
}
|
|
```
|
|
|
|
### `"never"`
|
|
|
|
Nested properties are not allowed.
|
|
|
|
The following patterns are considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
margin: {
|
|
left: 10px;
|
|
}
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
background: red {
|
|
repeat: no-repeat;
|
|
}
|
|
}
|
|
```
|
|
|
|
The following patterns are *not* considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
background-color: red;
|
|
background-repeat: no-repeat;
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
background:red {
|
|
color: blue;
|
|
}
|
|
}
|
|
|
|
/* There is no space after the colon in `background:red` so it is considered A SELECTOR and is compiled into:
|
|
|
|
a background:red {
|
|
color: blue;
|
|
}
|
|
|
|
*/
|
|
```
|
|
|
|
## Optional options
|
|
|
|
### `except: ["only-of-namespace"]`
|
|
|
|
*Works only* with `"always"` and reverses its effect for a property if it is the only one with the corresponding "namespace" (e.g. `margin` in `margin-top`) in a ruleset.
|
|
|
|
The following patterns are considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 10px;
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
font: {
|
|
size: 10px; // Only one rule nested (reverse "always")
|
|
}
|
|
}
|
|
```
|
|
|
|
```scss
|
|
a {
|
|
font: {
|
|
size: 10px; // Prop 1, ...
|
|
}
|
|
font-weight: 400; // ... prop 2, so must be nested as well
|
|
}
|
|
```
|
|
|
|
The following patterns are *not* considered warnings:
|
|
|
|
```scss
|
|
a {
|
|
position: absolute;
|
|
background-color: red; // no other `background-` properties in a ruleset
|
|
}
|
|
```
|