Expected padding
, 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;
}
Expected border
, found padding
Open
padding: 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;
}
Multiline style comments should not be used Open
/* PAGINATION */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Expected background-color
, found padding
Open
padding: 0 12px;
- 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 should be nested within its parent Type-selector Open
& span.current {
- 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: '';
}
}
No unit allowed for values of 0 Open
line-height: 0px;
- Read upRead up
- Exclude checks
Zero Unit
Rule zero-unit
will enforce whether or not values of 0
used for length should be unitless.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
margin: 0;
}
.bar {
padding: 5px 0 0;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
margin: 0px;
}
.bar {
padding: 5px 0px 0px;
}
Expected font-weight
, found border-radius
Open
border-radius: 6px;
- 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 background-color
Open
background-color: $color-btns;
- 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;
}
Files must end with a new line Open
}
- Read upRead up
- Exclude checks
Final Newline
Rule final-newline
will enforce whether or not files should end with a newline.
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'bar';
}
// Newline under this comment at end of file
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'bar';
}
// No newline under this comment at end of file
Class should be nested within its parent Type-selector Open
& span.gap {
- 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 margin
, found color
Open
color: $color-btns;
- 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 background-color
, found padding
Open
padding: 0 12px;
- 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-weight
, found background-color
Open
background-color: $color-pagination-bg;
- 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 line-height
, found border-radius
Open
border-radius: 6px;
- 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
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 margin
, found float
Open
float: 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;
}
Qualifying elements are not allowed for class selectors Open
& span.gap {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Pseudo-class should be nested within its parent Type-selector Open
& a:hover {
- Read upRead up
- Exclude checks
Force Pseudo Nesting
Rule force-pseudo-nesting
will enforce the nesting of pseudo elements/classes.
Examples
When enabled, the following are disallowed: ```scss p:nth-of-type(2) { margin: 0; }
.parent { .child { p::first-line { color: #ff0000; } } }
.parent { .child { .sub p::first-line { color: #ff0000; } } } ```
When enabled, the following are allowed:
p {
&:nth-of-type(2) {
margin: 0;
}
}
.parent {
.child {
p {
&::first-line {
color: #ff0000;
}
}
}
}
.parent {
.child {
.sub p {
&::first-line {
color: #ff0000;
}
}
}
}
Expected color
, found text-decoration
Open
text-decoration: 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 border-radius
, found line-height
Open
line-height: 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;
}
A value of none
is not allowed. 0
must be used. Open
border: none;
- Read upRead up
- Exclude checks
Border Zero
Rule border-zero
will enforce whether one should use 0
or none
when specifying a zero border
value
Options
-
convention
:'0'
/'none'
(defaults to0
)
If an invalid convention is provided the rule will default back to
convention: '0'
. An extra warning/error will also be thrown online 1
column 1
of a file with a lint issue to inform you of this fact.
Examples
When convention: '0'
, the following are allowed. When convention: 'none'
, the following are disallowed:
.foo {
border: 0;
}
.bar {
border-right: 0;
}
When convention: 'none'
, the following are allowed. When convention: '0'
, the following are disallowed:
.foo {
border: none;
}
.bar {
border-left: none;
}
Invalid conventions
When the invalid convention convention: 'zero'
is supplied, the following are allowed as the rule defaults to convention: '0'
.
.foo {
border: none;
}
.bar {
border-left: 0;
}
Expected border-radius
, found line-height
Open
line-height: 38px;
- 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 color
, found text-decoration
Open
text-decoration: 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 line-height
, found color
Open
color: $color-pagination-bg;
- 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 text-decoration
, found margin
Open
margin: 0 3px;
- 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;
}
Qualifying elements are not allowed for class selectors Open
& span.current {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Expected margin
, 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;
}
Expected text-decoration
, found margin
Open
margin: 0 3px;
- 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;
}
Properties should be ordered border, float, padding Open
padding: 0;
- Exclude checks
Properties should be ordered display, float, margin, margin-top Open
margin: 0 auto;
- Exclude checks
Unnecessary parent selector (&) Open
& span.current {
- Exclude checks
Use //
comments everywhere Open
/* PAGINATION */
- Exclude checks
Avoid qualifying class selectors with an element. Open
& span.current {
- Exclude checks
Unnecessary parent selector (&) Open
& a,
- Exclude checks
Files should end with a trailing newline Open
}
- Exclude checks
Unnecessary parent selector (&) Open
& a:hover {
- Exclude checks
Avoid qualifying class selectors with an element. Open
& a,
- Exclude checks
border: 0
is preferred over border: none
Open
border: none;
- Exclude checks
Properties should be ordered background-color, border-radius, color, font-weight, line-height, margin, padding, text-decoration Open
padding: 0 12px;
- Exclude checks
0px
should be written without units as 0
Open
line-height: 0px;
- Exclude checks
Properties should be ordered background-color, border-radius, color, font-weight, line-height, margin, padding, text-decoration Open
padding: 0 12px;
- Exclude checks