$menu-item-padding-inline            : 12px 16px;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

/* Large screen / Wide Desktop */

Close

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
 */

$grid-gutter-width          : 0;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

$zindex-notification        : 1010;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

        dark: #333,

Close

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

$vs-state-disabled-color: map_get($vs-colors, 'light') !default;

Close

Function Name Format

Rule function-name-format will enforce a convention for function names.

Options

• allow-leading-underscore: true/false (defaults to true)
• convention: 'hyphenatedlowercase' (default), camelcase, snakecase, strictbem, hyphenatedbem, or a Regular Expression that the function name must match (e.g. ^[_A-Z]+$)
• convention-explanation: Custom explanation to display to the user if a function doesn't adhere to the convention

Example 1

Settings: - allow-leading-underscore: true - convention: hyphenatedlowercase

When enabled, the following are allowed:

@function hyphenated-lowercase() {
  @return "foo";
}

@function _leading-underscore($x) {
  @return $x;
}

.foo {
  content: hyphenated-lowercase("bar");
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE() {
  @return "foo";
}

@function _camelCaseWithLeadingUnderscore($x) {
  @return $x;
}

.foo {
  content: snake_case();
}

Example 2

Settings: - allow-leading-underscore: false - convention: camelcase

When enabled, the following are allowed:

@function camelCase() {
  @return "foo";
}

.foo {
  content: anotherCamelCase();
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE() {
  @return "foo";
}

@function _camelCaseWithLeadingUnderscore() {
  @return "foo";
}

.foo {
  content: snake_case();
}

Example 3

Settings: - allow-leading-underscore: false - convention: pascalcase

When enabled, the following are allowed:

@function PascalCase() {
  @return "foo";
}

.foo {
  content: AnotherPascalCase();
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE() {
  @return "foo";
}

@function _camelCaseWithLeadingUnderscore() {
  @return "foo";
}

.foo {
  content: snake_case();
}

Example 4

Settings: - allow-leading-underscore: false - convention: snakecase

When enabled, the following are allowed:

@function snake_case() {
  @return "foo";
}

.foo {
  content: another_snake_case();
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE() {
  @return "foo";
}

@function _snake_case_with_leading_underscore() {
  @return "foo";
}

.foo {
  content: camelCase();
}

Example 5

Settings: - convention: strictbem

When enabled, the following are allowed:

@function namespace__function {
  @return "foo";
}

@function namespace__function_mod-name {
  @return "foo";
}

@function namespace_mod-name__function {
  @return "foo";
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE {
  @return "foo";
}

.foo {
  content: camelCase();
}

Example 6

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

@function namespace__function {
  @return "foo";
}

@function namespace__function--mod-name {
  @return "foo";
}

@function namespace--mod-name__function {
  @return "foo";
}

When enabled, the following are disallowed:

@function HYPHENATED-UPPERCASE {
  @return "foo";
}

.foo {
  content: camelCase();
}

Example 7

Settings: - allow-leading-underscore: true - convention: '^[_A-Z]+$' - convention-explanation: 'Functions must contain only uppercase letters and underscores'

When enabled, the following are allowed:

@function SCREAMING_SNAKE_CASE() {
  @return "foo";
}

.foo {
  content: _LEADING_UNDERSCORE();
}

When enabled, the following are disallowed:

(Each line with a function call/declaration will report Functions must contain only uppercase letters and underscores when linted.)

@function HYPHENATED-UPPERCASE() {
  @return "foo";
}

@function _snake_case_with_leading_underscore() {
  @return "foo";
}

.foo {
  content: camelCase();
}

$menu-bg-color-light                 : $color-white;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

$menu-item-bg-color-active           : $brand-blue-50;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

$menu-dropdown-item-padding          : 12px 16px;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

$tabs-border-color                   : $grey-100;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}

$tabs-nav-height-sm                  : 32px;

Close

Space Before Colon

Rule space-before-colon will enforce whether or not a space should be included before a colon (:).

Options

• include: true/false (defaults to false)

Examples

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

.foo {
  content: 'bar';
}

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

.foo {
  content :'bar';
}