notes/node_modules/stylelint-scss/src/rules/declaration-nested-properties/README.md

154 lines
2.4 KiB
Markdown
Raw Normal View History

2017-03-09 18:16:08 +00:00
# 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
}
```