Showing 625 of 625 total issues
Class should be nested within its parent Class Open
.navbar-light .navbar-nav .nav-link,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Expected text-decoration
, found font-size
Open
font-size: 0.9rem;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected float
, found margin
Open
margin: 0 auto;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected font-size
, found letter-spacing
Open
letter-spacing: 0px;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected padding-top
, found text-align
Open
text-align: center;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected indentation of 6 spaces but found 10. Open
margin-bottom: $gutter-vertical-small;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected indentation of 4 spaces but found 6. Open
padding: 0 3rem;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected indentation of 8 spaces but found 14. Open
margin-bottom: $gutter-vertical-small;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected indentation of 4 spaces but found 6. Open
width: calc((100% - #{$gutter-horizontal}) / 2);
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected indentation of 4 spaces but found 6. Open
width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Properties should be ordered box-sizing, margin, outline, padding, text-decoration Open
margin: 0;
- Exclude checks
Line should be indented with spaces, not tabs Open
text-decoration: none;
- Exclude checks
Line should be indented with spaces, not tabs Open
box-sizing: border-box;
- Exclude checks
Line should be indented with spaces, not tabs Open
@include respond(tab-land) {
- Exclude checks
Properties should be ordered -webkit-appearance, background-color, border, color, text-align, width Open
border: none;
- Exclude checks
0px
should be written without units as 0
Open
box-shadow: 0px 5px 10px $color-black;
- Exclude checks
Properties should be ordered height, object-fit, width Open
width: 100%;
- Exclude checks
Properties should be ordered background-color, color, display, text-decoration, text-transform, transition Open
color: $color-btns;
- Exclude checks
Properties should be ordered background-color, border-radius, display, height, justify-content, margin, padding, width Open
display: flex;
- Exclude checks
0.8
should be written without a leading zero as .8
Open
rgba($color-btns, 0.8));
- Exclude checks