Sign upLogin

sgammon/GUST

View on GitHub
Star
samples/todolist/src/frontend/_base.scss

Summary

Maintainability
Test Coverage

Leading underscores are not allowed
Open

@import "_vars.scss";
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

Clean Import Paths

Rule clean-import-paths will enforce whether or not @import paths should have leading underscores and/or filename extensions.

Options

  • leading-underscore: true/false (defaults to false)
  • filename-extension: true/false (defaults to false)

Examples

leading-underscore

When leading-underscore: false, the following are allowed. When leading-underscore: true, the following are disallowed:

@import 'foo';
@import 'bar/foo';

When leading-underscore: true, the following are allowed. When leading-underscore: false, the following are disallowed:

@import '_foo';
@import '_bar/foo';

filename-extension

When filename-extension: false, the following are allowed. When filename-extension: true, the following are disallowed:

@import 'foo';
@import 'bar/foo';

When filename-extension: true, the following are allowed. When filename-extension: false, the following are disallowed:

@import 'foo.scss';
@import 'bar/foo.scss';

Class should be nested within its parent Class
Open

  .mdl-layout__header-row .mdl-navigation__link {
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

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

Strings must use single quotes
Open

@import "_vars.scss";
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

Quotes

Rule quotes will enforce whether single quotes ('') or double quotes ("") should be used for all strings.

Options

  • style: single/double (defaults to single)

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

Multiline style comments should not be used
Open

/*
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

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

Qualifying elements are not allowed for class selectors
Open

body.todolist {
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

No Qualifying Elements

Rule no-qualifying-elements will enforce that selectors are not allowed to have qualifying elements.

Options

  • allow-element-with-attribute: true/false (defaults to false)
  • allow-element-with-class: true/false (defaults to false)
  • allow-element-with-id: true/false (defaults to false)

Examples

By default, the following are disallowed:

div.foo {
  content: 'foo';
}

ul#foo {
  content: 'foo';
}

input[type='email'] {
  content: 'foo';
}

allow-element-with-attribute

When allow-element-with-attribute: true, the following are allowed. When allow-element-with-attribute: false, the following are disallowed.

input[type='email'] {
  content: 'foo';
}

a[href] {
  content: 'foo';
}

allow-element-with-class

When allow-element-with-class: true, the following are allowed. When allow-element-with-class: false, the following are disallowed.

div.foo {
  content: 'foo';
}

h1.bar {
  content: 'foo';
}

allow-element-with-id

When allow-element-with-id: true, the following are allowed. When allow-element-with-id: false, the following are disallowed.

ul#foo {
  content: 'foo';
}

p#bar {
  content: 'foo';
}

Class should be nested within its parent Type-selector
Open

body.todolist {
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

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 '.mdl-layout__header' should be written in lowercase with hyphens
Open

  .mdl-layout__header {
Severity: Major
Found in samples/todolist/src/frontend/_base.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;
}

File extensions are not allowed
Open

@import "_vars.scss";
Severity: Major
Found in samples/todolist/src/frontend/_base.scss by sass-lint

Clean Import Paths

Rule clean-import-paths will enforce whether or not @import paths should have leading underscores and/or filename extensions.

Options

  • leading-underscore: true/false (defaults to false)
  • filename-extension: true/false (defaults to false)

Examples

leading-underscore

When leading-underscore: false, the following are allowed. When leading-underscore: true, the following are disallowed:

@import 'foo';
@import 'bar/foo';

When leading-underscore: true, the following are allowed. When leading-underscore: false, the following are disallowed:

@import '_foo';
@import '_bar/foo';

filename-extension

When filename-extension: false, the following are allowed. When filename-extension: true, the following are disallowed:

@import 'foo';
@import 'bar/foo';

When filename-extension: true, the following are allowed. When filename-extension: false, the following are disallowed:

@import 'foo.scss';
@import 'bar/foo.scss';

Selector mdl-navigation__link should be written in lowercase with hyphens
Open

  .mdl-layout__header-row .mdl-navigation__link {
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Prefer single quoted strings
Open

@import "_vars.scss";
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Class '.mdl-layout__header-row' should be written in lowercase with hyphens
Open

  .mdl-layout__header-row .mdl-navigation__link {
Severity: Major
Found in samples/todolist/src/frontend/_base.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 '.mdl-navigation__link' should be written in lowercase with hyphens
Open

  .mdl-layout__header-row .mdl-navigation__link {
Severity: Major
Found in samples/todolist/src/frontend/_base.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;
}

Use // comments everywhere
Open

/*
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Avoid qualifying class selectors with an element.
Open

body.todolist {
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Imported partial _vars.scss should be written as vars
Open

@import "_vars.scss";
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Selector mdl-layout__header should be written in lowercase with hyphens
Open

  .mdl-layout__header {
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

Selector mdl-layout__header-row should be written in lowercase with hyphens
Open

  .mdl-layout__header-row .mdl-navigation__link {
Severity: Minor
Found in samples/todolist/src/frontend/_base.scss by scss-lint

There are no issues that match your filters.

Category
Status