Showing 4,835 of 4,835 total issues
Replace ········chunks:·'all'
with chunks:·"all"
Open
chunks: 'all',
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
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;
}
File extensions are not allowed Open
@import './list.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-bottom: 3px solid $blue-3 !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 indentation of 4 spaces but found 8. Open
display: none;
- 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';
}
}
}
Class '.vs__search' should be written in lowercase with hyphens Open
&__search,
- 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 border
, found margin
Open
margin: 0;
- 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;
}
Don't include leading zeros on numbers Open
font-size: 0.9rem;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Class '.vs__dropdown-option' should be written in lowercase with hyphens Open
&__dropdown-option {
- 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;
}
Don't include leading zeros on numbers Open
font-size: 0.9rem;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Class should be nested within its parent Class Open
.has-error .vs__dropdown-toggle {
- 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 display
, found flex-flow
Open
flex-flow: row nowrap;
- 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 '.crud__content' should be written in lowercase with hyphens Open
&__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;
}
Class '.at-select__selection' should be written in lowercase with hyphens Open
&--small &__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;
}
!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;
}
Class '.crud__content' should be written in lowercase with hyphens Open
.crud__content.crud__item-view {
- 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;
}
Selectors must be placed on new lines Open
h1, h2, h3, h4, h5, h6, h1, .h1, .h2, .h3, .h4, .h5, .h6 {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Selectors must be placed on new lines Open
h1, h2, h3, h4, h5, h6, h1, .h1, .h2, .h3, .h4, .h5, .h6 {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Selectors must be placed on new lines Open
h1, h2, h3, h4, h5, h6, h1, .h1, .h2, .h3, .h4, .h5, .h6 {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
No space allowed before :
Open
$brand-blue-400 : #79A1EB;
- Read upRead up
- Exclude checks
Space Before Colon
Rule space-before-colon
will enforce whether or not a space should be included before a colon (:
).
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'bar';
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content :'bar';
}