Sign upLogin

Kercode/tutti_gruppi

View on GitHub
Star
app/assets/stylesheets/sass/components/_buttons.scss

Summary

Maintainability
Test Coverage

Expected border-radius, found padding
Open

  padding: 6px 13px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected position, found bottom
Open

  bottom: 30px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected padding, found cursor
Open

  cursor: pointer;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected font-size, found line-height
Open

    line-height: 50px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected border, found border-radius
Open

  border-radius: 15px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected border-radius, found background-color
Open

  background-color: $color-btns;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

No unit allowed for values of 0
Open

  box-shadow: 0px 5px 10px $color-black;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.scss by sass-lint

Zero Unit

Rule zero-unit will enforce whether or not values of 0 used for length should be unitless.

Options

  • include: true/false (defaults to false)

Examples

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

.foo {
  margin: 0;
}

.bar {
  padding: 5px 0 0;
}

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

.foo {
  margin: 0px;
}

.bar {
  padding: 5px 0px 0px;
}

Expected box-shadow, found height
Open

  height: 50px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected content, found font-family
Open

    font-family: FontAwesome;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected cursor, found font-weight
Open

  font-weight: bold;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected background-color, found display
Open

  display: inline-block;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected line-height, found color
Open

    color: $color-pagination-bg;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected height, found border-radius
Open

  border-radius: 4px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected opacity, found position
Open

  position: fixed;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected bottom, found width
Open

  width: 50px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Strings must use single quotes
Open

    content: "\f077";
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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";
}

ID selectors not allowed
Open

#buttonToTop {
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.scss by sass-lint

No IDs

Rule no-ids will enforce that ID selectors are not allowed to be used.

Examples

When enabled, the following are disallowed:

#foo {
  content: 'bar';
}

Expected transition, found opacity
Open

  opacity: 0;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected color, found font-size
Open

    font-size: 2em;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected background-color, found cursor
Open

    cursor: pointer;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected width, found z-index
Open

  z-index: 1000;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected display, found text-align
Open

  text-align: center;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected z-index, found box-shadow
Open

  box-shadow: 0px 5px 10px $color-black;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected cursor, found background-color
Open

    background-color: $color-light-gray;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

ID selectors not allowed
Open

#btns {
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.scss by sass-lint

No IDs

Rule no-ids will enforce that ID selectors are not allowed to be used.

Examples

When enabled, the following are disallowed:

#foo {
  content: 'bar';
}

Expected font-family, found font-weight
Open

    font-weight: normal;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected color, found content
Open

    content: "\f077";
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected font-weight, found border
Open

  border: none;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

A value of none is not allowed. 0 must be used.
Open

  border: none;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.scss by sass-lint

Border Zero

Rule border-zero will enforce whether one should use 0 or none when specifying a zero border value

Options

  • convention: '0'/'none' (defaults to 0)

If an invalid convention is provided the rule will default back to convention: '0'. An extra warning/error will also be thrown on line 1 column 1 of a file with a lint issue to inform you of this fact.

Examples

When convention: '0', the following are allowed. When convention: 'none', the following are disallowed:

.foo {
  border: 0;
}

.bar {
  border-right: 0;
}

When convention: 'none', the following are allowed. When convention: '0', the following are disallowed:

.foo {
  border: none;
}

.bar {
  border-left: none;
}

Invalid conventions

When the invalid convention convention: 'zero' is supplied, the following are allowed as the rule defaults to convention: '0'.

.foo {
  border: none;
}

.bar {
  border-left: 0;
}

Expected text-align, found transition
Open

  transition: background-color .3s, opacity .5s, visibility .5s;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected font-weight, found line-height
Open

    line-height: 50px;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected line-height, found color
Open

    color: $color-pagination-bg;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected font-size, found font-style
Open

    font-style: normal;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

Expected font-style, found font-size
Open

    font-size: 2em;
Severity: Major
Found in app/assets/stylesheets/sass/components/_buttons.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;
}

0px should be written without units as 0
Open

  box-shadow: 0px 5px 10px $color-black;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

border: 0 is preferred over border: none
Open

  border: none;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Properties should be ordered color, font-size, line-height
Open

    font-size: 2em;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Prefer single quoted strings
Open

    content: "\f077";
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Avoid using id selectors
Open

#buttonToTop {
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Selector buttonToTop should be written in lowercase with hyphens
Open

#buttonToTop {
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Properties should be ordered color, content, font-family, font-size, font-style, font-weight, line-height
Open

    content: "\f077";
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Properties should be ordered background-color, cursor
Open

    cursor: pointer;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Properties should be ordered background-color, border, border-radius, color, cursor, font-weight, padding
Open

  border-radius: 15px;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Avoid using id selectors
Open

#btns {
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

Properties should be ordered background-color, border-radius, bottom, box-shadow, display, height, opacity, position, right, text-align, transition, visibility, width, z-index
Open

  display: inline-block;
Severity: Minor
Found in app/assets/stylesheets/sass/components/_buttons.scss by scss-lint

There are no issues that match your filters.

Category
Status