sasstools / sass-lint

Pure Node.js Sass linting
MIT License
1.77k stars 532 forks source link

Allow individual elem/attribute/pseudo/... nesting depth limit #603

Open ncoden opened 8 years ago

ncoden commented 8 years ago

It could be great to allow to specify an individual nesting depth limit for each nestable thing type. In my code, the 2 level depth limit is sometimes problematic.

For example:

.block {
  &__element {
    &:hover {
      &::before { ... } // 3-level depth
    }
  }
}

I consider this code is clean, but I know that a 3-level depth limit can allow a lot of abuses in other situations. So I think a configuration like the following could be a compromise:

rules:
  nesting-depth:
    - 1
    -
      max-depth: 3
      max-element-depth: 1
      max-attribute-depth: 1
      max-pseudo-class-depth: 2
      max-pseudo-element-depth: 1

Which allows the above code, but disallows :

.block {
  &__element {
    &__sub-element { ... }
  }
}
.block {
  &[attribute-a] {
    &[attribute-b] { ... }
  }
}

Or, event if it doesn't make sens i think (I don't know if latest HTML5 pseudo-elements can be nested) :

.block {
  &::before {
    &::after { ... }
  }
}
.block {
  &:first-child {
    &:first-child {
      &:hover { ... }
    }
  }
}

The best would be to differentiate too event (:hover, :active) and beacon (first-child, last-child) pseudo-classes.

peduarte commented 8 years ago

👍

The lints considers pseudo-selectors as normal dom elements, causing the nesting-depth warning to pop way too often.

VaclovasV commented 7 years ago

up