Showing 625 of 625 total issues
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;
}
Strings must use single quotes Open
[type="reset"], [type="submit"], button, html [type="button"] {
- Read upRead up
- Exclude checks
Quotes
Rule quotes
will enforce whether single quotes (''
) or double quotes (""
) should be used for all strings.
Options
-
style
:single
/double
(defaults tosingle
)
Examples
When style: single
, the following are allowed. When style: double
, the following are disallowed:
.foo {
content: 'bar';
}
When style: double
, the following are allowed. When style: single
, the following are disallowed:
.foo {
content: "bar";
}
Selectors must be placed on new lines Open
[type="reset"], [type="submit"], button, html [type="button"] {
- 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';
}
Expected indentation of 8 spaces but found 14. Open
margin-right: 0;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected display
, found width
Open
width: 30%;
- 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;
}
Mixins should come before declarations Open
@include respond(tab-port) {
- Read upRead up
- Exclude checks
Mixins Before Declarations
Rule mixins-before-declarations
will enforce that mixins should be written before declarations in a ruleset.
Options
-
exclude
:['breakpoint', 'mq']
(array of mixin names to be excluded from this rule)
Examples
When enabled, the following are allowed:
.foo {
@include bar;
content: 'baz';
@include breakpoint(500px) {
content: 'qux';
}
@include mq(500px) {
content: 'qux';
}
}
When enabled, the following are disallowed:
.foo {
content: 'baz';
@include baz;
}
Expected background-position
, found height
Open
height: 25rem;
- 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 height
, found background-size
Open
background-size: cover;
- 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 Class Open
.navbar-light .navbar-nav .show>.nav-link {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class should be nested within its parent Class Open
.custom-toggler.navbar-toggler {
- 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 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 border-radius
, found height
Open
height: auto;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected text-align
, found background-color
Open
background-color: $color-cookie;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Expected indentation of 6 spaces but found 10. Open
margin-right: $gutter-horizontal;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
No trailing whitespace allowed Open
width: calc((100% - #{$gutter-horizontal}) / 2);
- Read upRead up
- Exclude checks
No Trailing Whitespace
Rule no-trailing-whitespace
will enforce that trailing whitespace is not allowed.
Examples
When enabled, the following are disallowed (\s denotes spaces or tabs):
.foo {\s
margin: 1.5rem;
}
.foo {
margin: .5rem;\s
}
.foo {
margin: .4rem;
}\s
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;
}
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
Expected background-size
, found background-position
Open
background-position: center right;
- 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;
}
Color functions such as 'rgba' should only be used in variable declarations Open
text-shadow: 0 9px 5px rgba($color-black, 0.6);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Expected background-color
, found width
Open
width: 100%;
- 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;
}