.pager .page-link,

Close

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: '';
  }
}

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);

Close

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 to true)
• allow-rgba: true/false (defaults to false)
• allow-variable-identifiers: true/false (defaults to true)

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
  )
)

  padding:          0.3em 0.2em 0 0;

Close

Leading Zero

Rule leading-zero will enforce whether or not decimal numbers should include a leading zero.

Options

• include: true/false (defaults to false)

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;
}

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);

Close

Leading Zero

Rule leading-zero will enforce whether or not decimal numbers should include a leading zero.

Options

• include: true/false (defaults to false)

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;
}

main textarea {

Close

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: '';
  }
}

  -webkit-align-items:     center;

Close

No Vendor Prefixes

Rule no-vendor-prefixes will enforce that vendor prefixes are not allowed to be used.

List of prefixes affected by default: * webkit * moz * ms

Options

• additional-identifiers: [array of additional prefixes to check for] (defaults to empty array [])
• excluded-identifiers: [array of prefixes to exclude checking for] (defaults to empty array [])
• ignore-non-standard: true:false (defaults to false)

Examples

When enabled, the following are disallowed:

@-webkit-keyframes anim {
  0% { opacity: 0; }
}

.ms-block {
  -ms-hyphenate-limit-lines: no-limit;
}

::-moz-placeholder {
  content: '';
}

.foo {
  -webkit-transition: none;
}

.bar {
  position: -moz-sticky;
}

Additional Identifiers

When additional-identifiers contains a custom prefix value of khtml as show below

no-vendor-prefixes:
  - 1
  -
    additional-identifiers:
      - khtml

The following would now also be disallowed

.baz {
  position: -khtml-sticky;
}

Excluded Identifiers

When excluded-identifiers contains currently disallowed prefix values such as webkit and moz as show below

no-vendor-prefixes:
  - 1
  -
    excluded-identifiers:
      - webkit
      - moz

The following would now be allowed

@-webkit-keyframes anim {
  0% { opacity: 0; }
}

::-moz-placeholder {
  content: '';
}

.foo {
  -webkit-transition: none;
}

.bar {
  position: -moz-sticky;
}

While the following would remain disallowed

.ms-block {
  -ms-hyphenate-limit-lines: no-limit;
}

Ignore Non Standard

ignore-non-standard is an option that allows you to specify whether only standard properties from our properties list should be affected by this rule or if any prefixed property / element should be affected.

When ignore-non-standard is set to false the following are disallowed, when ignore-non-standard is set to true the following are allowed:

html {
  -webkit-tap-highlight-color: $link-color-hover;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);

Close

Leading Zero

Rule leading-zero will enforce whether or not decimal numbers should include a leading zero.

Options

• include: true/false (defaults to false)

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;
}

main [type=reset]:hover {

Close

Attribute Quotes

Rule attribute-quotes will enforce the use of quotes in attribute values.

Options

• include: true/false (defaults to true)

Examples

include

When include: true, the following are allowed. When include: false, the following are disallowed:

span[lang="pt"] {
  color: green;
}

span[lang~="en-us"] {
  color: blue;
}

span[class^="main"] {
  background-color: yellow;
}

a[href*="example"] {
  background-color: #CCCCCC;
}

input[type="email" i] {
  border-color: blue;
}

When include: false, the following are allowed. When include: true, the following are disallowed:

span[lang=pt] {
  color: green;
}

span[lang~=en-us] {
  color: blue;
}

span[class^=main] {
  background-color: yellow;
}

a[href*=example] {
  background-color: #CCCCCC;
}

input[type=email i] {
  border-color: blue;
}

.pagination .disabled .page-link {

Close

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: '';
  }
}

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);

Close

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 to true)
• allow-rgba: true/false (defaults to false)
• allow-variable-identifiers: true/false (defaults to true)

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
  )
)

  border-top:   #dddddd solid 1px;

Close

Hex Length

Rule hex-length will enforce the length of hexadecimal values

Options

• style: short/long (defaults to short)

Examples

When style: short, the following are allowed. When style: long, the following are disallowed:

$foo-color: #456;

.bar {
  background: linear-gradient(top, #3ff, #ddd);
}

.baz {
  color: #fff;
}

When style: long, the following are allowed. When style: short, the following are disallowed:

$foo-color: #445566;

.bar {
  background: linear-gradient(top, #33ffff, #dddddd);
}

.baz {
  color: #ffffff;
}

In both cases the following will be allowed as the values cannot be shortened:

$quz-color: #abcdef;

.qux {
  color: #123456;
}

main select {

Close

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: '';
  }
}

  padding:              0.5em;

Close

Leading Zero

Rule leading-zero will enforce whether or not decimal numbers should include a leading zero.

Options

• include: true/false (defaults to false)

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;
}

.tagsize1 { font-size: 1.0em; }

Close

No Trailing Zero

Rule no-trailing-zero will enforce that trailing zeros are not allowed.

Examples

When enabled, the following are disallowed:

.foo {
  margin: 1.500rem;
}

.foo {
  margin: .500rem;
}

.foo {
  margin: 0.2500rem;
}

.foo {
  margin: 4.0rem;
}

  background:   #ffdddd;

Close

Hex Length

Rule hex-length will enforce the length of hexadecimal values

Options

• style: short/long (defaults to short)

Examples

When style: short, the following are allowed. When style: long, the following are disallowed:

$foo-color: #456;

.bar {
  background: linear-gradient(top, #3ff, #ddd);
}

.baz {
  color: #fff;
}

When style: long, the following are allowed. When style: short, the following are disallowed:

$foo-color: #445566;

.bar {
  background: linear-gradient(top, #33ffff, #dddddd);
}

.baz {
  color: #ffffff;
}

In both cases the following will be allowed as the values cannot be shortened:

$quz-color: #abcdef;

.qux {
  color: #123456;
}

  clip:         rect( 0 0 0 0 );

Close

Space Between Parens

Rule space-between-parens will enforce whether or not a space should be included before the first item and after the last item inside parenthesis (()).

Options

• include: true/false (defaults to false)

Examples

When include: false, the following are allowed. When include: true, the following are disallowed:

@function foo($bar) {
  @return $bar;
}

@mixin bar($baz) {
  content: $baz;
}

.foo {
  @include bar('Hello');
  content: foo('bar');
  width: calc(100% - 10px);
}

When include: true, the following are allowed. When include: false, the following are disallowed:

@function foo( $bar ) {
  @return $bar;
}

@mixin bar($baz ) {
  content: $baz;
}

.foo {
  @include bar( 'Hello' );
  content: foo( 'bar');
  width: calc( 100% - 10px);
}

nav ul, .sidebar ul, .header ul, .footer ul {

Close

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: '';
  }
}

  padding:      0.5em;

Close

Leading Zero

Rule leading-zero will enforce whether or not decimal numbers should include a leading zero.

Options

• include: true/false (defaults to false)

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;
}

nav ul, .sidebar ul, .header ul, .footer ul {

Close

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';
}

  -moz-appearance:      radio;

Close

No Vendor Prefixes

Rule no-vendor-prefixes will enforce that vendor prefixes are not allowed to be used.

List of prefixes affected by default: * webkit * moz * ms

Options

• additional-identifiers: [array of additional prefixes to check for] (defaults to empty array [])
• excluded-identifiers: [array of prefixes to exclude checking for] (defaults to empty array [])
• ignore-non-standard: true:false (defaults to false)

Examples

When enabled, the following are disallowed:

@-webkit-keyframes anim {
  0% { opacity: 0; }
}

.ms-block {
  -ms-hyphenate-limit-lines: no-limit;
}

::-moz-placeholder {
  content: '';
}

.foo {
  -webkit-transition: none;
}

.bar {
  position: -moz-sticky;
}

Additional Identifiers

When additional-identifiers contains a custom prefix value of khtml as show below

no-vendor-prefixes:
  - 1
  -
    additional-identifiers:
      - khtml

The following would now also be disallowed

.baz {
  position: -khtml-sticky;
}

Excluded Identifiers

When excluded-identifiers contains currently disallowed prefix values such as webkit and moz as show below

no-vendor-prefixes:
  - 1
  -
    excluded-identifiers:
      - webkit
      - moz

The following would now be allowed

@-webkit-keyframes anim {
  0% { opacity: 0; }
}

::-moz-placeholder {
  content: '';
}

.foo {
  -webkit-transition: none;
}

.bar {
  position: -moz-sticky;
}

While the following would remain disallowed

.ms-block {
  -ms-hyphenate-limit-lines: no-limit;
}

Ignore Non Standard

ignore-non-standard is an option that allows you to specify whether only standard properties from our properties list should be affected by this rule or if any prefixed property / element should be affected.

When ignore-non-standard is set to false the following are disallowed, when ignore-non-standard is set to true the following are allowed:

html {
  -webkit-tap-highlight-color: $link-color-hover;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}