Showing 4,835 of 4,835 total issues
Replace ········
with ····
Open
plugins: [
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Class '.at-collapse__content' should be written in lowercase with hyphens Open
.at-collapse__content .at-collapse__content {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
File extensions are not allowed Open
@import './button.scss';
- Read upRead up
- Exclude checks
Clean Import Paths
Rule clean-import-paths
will enforce whether or not @import
paths should have leading underscores and/or filename extensions.
Options
-
leading-underscore
:true
/false
(defaults tofalse
) -
filename-extension
:true
/false
(defaults tofalse
)
Examples
leading-underscore
When leading-underscore: false
, the following are allowed. When leading-underscore: true
, the following are disallowed:
@import 'foo';
@import 'bar/foo';
When leading-underscore: true
, the following are allowed. When leading-underscore: false
, the following are disallowed:
@import '_foo';
@import '_bar/foo';
filename-extension
When filename-extension: false
, the following are allowed. When filename-extension: true
, the following are disallowed:
@import 'foo';
@import 'bar/foo';
When filename-extension: true
, the following are allowed. When filename-extension: false
, the following are disallowed:
@import 'foo.scss';
@import 'bar/foo.scss';
!important not allowed Open
border: 1px solid $border-color-base !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Class '.at-select__input' should be written in lowercase with hyphens Open
& .at-select__input {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Expected font-size
, found border
Open
border: none;
- 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
, found border-radius
Open
border-radius: 4px;
- 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
, found color
Open
color: $text-color;
- 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;
}
Hex notation should all be lower case Open
border: 1px solid #EEEEF5;
- Read upRead up
- Exclude checks
Hex Notation
Rule hex-notation
will enforce the case of hexadecimal values
Options
-
style
:lowercase
/uppercase
(defaults tolowercase
)
Examples
When style: lowercase
, the following are allowed. When style: uppercase
, the following are disallowed:
$foo-color: #fff;
.bar {
background: linear-gradient(top, #cc2, #44d);
}
.baz {
color: #12a;
}
When style: uppercase
, the following are allowed. When style: lowercase
, the following are disallowed:
$foo-color: #FFF;
.bar {
background: linear-gradient(top, #CC2, #44D);
}
.baz {
color: #12A;
}
In both cases the following will be allowed as the values contain only numbers:
.qux {
color: #123;
}
Class '.at-container__inner' should be written in lowercase with hyphens Open
&__inner {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Class '.at-input__original' should be written in lowercase with hyphens Open
.at-input__original,
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Hex notation should all be lower case Open
border: 1px solid #EEEEF5;
- Read upRead up
- Exclude checks
Hex Notation
Rule hex-notation
will enforce the case of hexadecimal values
Options
-
style
:lowercase
/uppercase
(defaults tolowercase
)
Examples
When style: lowercase
, the following are allowed. When style: uppercase
, the following are disallowed:
$foo-color: #fff;
.bar {
background: linear-gradient(top, #cc2, #44d);
}
.baz {
color: #12a;
}
When style: uppercase
, the following are allowed. When style: lowercase
, the following are disallowed:
$foo-color: #FFF;
.bar {
background: linear-gradient(top, #CC2, #44D);
}
.baz {
color: #12A;
}
In both cases the following will be allowed as the values contain only numbers:
.qux {
color: #123;
}
Expected text-decoration
, found cursor
Open
cursor: help;
- 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;
}
Class '.at-select__selection' should be written in lowercase with hyphens Open
&__selection {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Expected color
, found font-weight
Open
font-weight: bold;
- 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;
}
!important not allowed Open
color: $blue-900!important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
!important not allowed Open
color: $blue-900!important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Expected font-size
, found font-weight
Open
font-weight: 600;
- 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 font-weight
Open
font-weight: 600;
- 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 font-weight
Open
font-weight: 600;
- 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;
}