Sign upLogin

cattr-app/frontend-application

View on GitHub
Star
app/core/sass/includes/menu.scss

Summary

Maintainability
Test Coverage

Class '.at-menu__item' should be written in lowercase with hyphens
Open

  &__item {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Whitespace required before !important
Open

      background-color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Space Before Bang

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

Options

  • include: true/false (defaults to true)

Examples

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

.foo {
  content: 'bar' !important;
}

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

.foo {
  content: 'bar'!important;
}

Whitespace required before !important
Open

      color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Space Before Bang

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

Options

  • include: true/false (defaults to true)

Examples

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

.foo {
  content: 'bar' !important;
}

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

.foo {
  content: 'bar'!important;
}

Class '.at-menu__item-link' should be written in lowercase with hyphens
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Class '.at-menu__submenu' should be written in lowercase with hyphens
Open

  &__submenu {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Pseudo-element should be nested within its parent Pseudo-class
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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

Class '.at-menu__submenu-title' should be written in lowercase with hyphens
Open

      > .at-menu__submenu-title {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Whitespace required before !important
Open

    color: $grey-400!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Space Before Bang

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

Options

  • include: true/false (defaults to true)

Examples

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

.foo {
  content: 'bar' !important;
}

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

.foo {
  content: 'bar'!important;
}

Class '.at-menu__submenu--active' should be written in lowercase with hyphens
Open

    &.at-menu__submenu--active {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Whitespace required before !important
Open

      color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Space Before Bang

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

Options

  • include: true/false (defaults to true)

Examples

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

.foo {
  content: 'bar' !important;
}

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

.foo {
  content: 'bar'!important;
}

Expected color, found font-weight
Open

    font-weight: bold;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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 to alphabetical. Unknown properties are sorted alphabetically)
  • ignore-custom-properties: true/false (defaults to false)

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

!important not allowed
Open

      color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

No Important

Rule no-important will enforce that important declarations are not allowed to be used.

Examples

When enabled, the following are disallowed:

.foo {
  content: 'bar' !important;
}

Class '.at-menu__submenu-title' should be written in lowercase with hyphens
Open

    &-title {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Pseudo-class should be nested within its parent Parent-selector-extension
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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

Pseudo-class should be nested within its parent Parent-selector-extension
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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

!important not allowed
Open

      background-color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

No Important

Rule no-important will enforce that important declarations are not allowed to be used.

Examples

When enabled, the following are disallowed:

.foo {
  content: 'bar' !important;
}

!important not allowed
Open

        color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

No Important

Rule no-important will enforce that important declarations are not allowed to be used.

Examples

When enabled, the following are disallowed:

.foo {
  content: 'bar' !important;
}

Class '.at-menu__item-link' should be written in lowercase with hyphens
Open

  &__item-link {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Class '.at-menu__submenu-link' should be written in lowercase with hyphens
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Class Name Format

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

Options

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

Example 1

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &._with-leading-underscore {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 2

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

When enabled, the following are allowed:

.hyphenated-lowercase {
  content: '';

  &.another-hyphenated-lowercase {
    content: '';
  }
}

.foo {
  @extend .hyphenated-lowercase;
}

When enabled, the following are disallowed:

._with-leading-underscore {
  content: '';
}

.HYPHENATED-UPPERCASE {
  content: '';
}

.camelCase {
  content: '';

  @extend .snake_case;
}

Example 3

Settings: - convention: camelcase

When enabled, the following are allowed:

.camelCase {
  content: '';
}

.foo {
  @extend .anotherCamelCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 4

Settings: - convention: pascalcase

When enabled, the following are allowed:

.PascalCase {
  content: '';
}

.Foo {
  @extend .AnotherPascalCase;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .snake_case;
}

Example 5

Settings: - convention: snakecase

When enabled, the following are allowed:

.snake_case {
  content: '';
}

.foo {
  @extend .another_snake_case;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 6

Settings: - convention: strictbem

When enabled, the following are allowed:

.block-name__elem-name {
  content: '';
}

.owner-name_mod-name_mod-val {
  content: '';
}

.block-name__elem-name_mod-bool {
  content: '';
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 7

Settings: - convention: hyphenatedbem

When enabled, the following are allowed:

.site-search {
  color: blue;
  width: 50px;
  height: 100%;
}

.site-search__field {
  text-decoration: underline;
}

.site-search--full {
  color: green;
}

When enabled, the following are disallowed:

.HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend .camelCase;
}

Example 8

Settings: - convention: ^[_A-Z]+$ - convention-explanation: 'Class must contain only uppercase letters and underscores'

When enabled, the following are allowed:

.SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend .SCREAMING_SNAKE_CASE;
}

When enabled, the following are disallowed:

(Each line with a class will report Class must contain only uppercase letters and underscores when linted.)

.HYPHENATED-UPPERCASE {
  content: '';
}

.snake_case {
  content: '';
}

.foo {
  @extend .camelCase;
}

Pseudo-element should be nested within its parent Pseudo-class
Open

    &#{&}--active &-link:not(.router-link-active)::after {
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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

Whitespace required before !important
Open

        color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

Space Before Bang

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

Options

  • include: true/false (defaults to true)

Examples

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

.foo {
  content: 'bar' !important;
}

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

.foo {
  content: 'bar'!important;
}

!important not allowed
Open

      color: $blue-900!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

No Important

Rule no-important will enforce that important declarations are not allowed to be used.

Examples

When enabled, the following are disallowed:

.foo {
  content: 'bar' !important;
}

!important not allowed
Open

    color: $grey-400!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

No Important

Rule no-important will enforce that important declarations are not allowed to be used.

Examples

When enabled, the following are disallowed:

.foo {
  content: 'bar' !important;
}

Expected font-weight, found color
Open

    color: $grey-400!important;
Severity: Major
Found in app/core/sass/includes/menu.scss by sass-lint

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 to alphabetical. Unknown properties are sorted alphabetically)
  • ignore-custom-properties: true/false (defaults to false)

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

! should be preceded by a space, and should not be followed by a space
Open

        color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

!important should not be used
Open

        color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

! should be preceded by a space, and should not be followed by a space
Open

    color: $grey-400!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

!important should not be used
Open

      color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

!important should not be used
Open

      background-color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

!important should not be used
Open

    color: $grey-400!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

Selector at-menu__submenu--active should be written in lowercase with hyphens
Open

    &:hover,
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

! should be preceded by a space, and should not be followed by a space
Open

      color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

! should be preceded by a space, and should not be followed by a space
Open

      color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

Properties should be ordered color, font-weight
Open

    font-weight: bold;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

!important should not be used
Open

      color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

Selector at-menu__submenu-title should be written in lowercase with hyphens
Open

      > .at-menu__submenu-title {
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

Nesting should be no greater than 3, but was 4
Open

      > .at-menu__submenu-title {
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

! should be preceded by a space, and should not be followed by a space
Open

      background-color: $blue-900!important;
Severity: Minor
Found in app/core/sass/includes/menu.scss by scss-lint

There are no issues that match your filters.

Category
Status