rules.scsslint.NestingDepth.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sonar-web-frontend-scss Show documentation

Consume reports generated by scsslint for code quality. Also consume reports for code duplication (either simian or cpd). The information generated by reports are added in Sonar

There is a newer version: 2.1.0

Show newest version

Details
Avoid nesting selectors too deeply.
Bad: deeply nested
.one {
  .two {
    .three {
      .four {
        ...
      }
    }
  }
}
Good
.three:hover {
}

.three {
  &:hover {
    ...
  }
}
Overly nested rules will result in over-qualified CSS that could prove hard to
maintain, output unnecessary selectors and is generally considered bad
practice.
This linter will not report an error if you have selectors with a large depth
of applicability. Use
SelectorDepth for this purpose.
No error
.one .two .three {
  ...
}
Error
.one {
  .two {
    .three {
      ...
    }
  }
}


Configuration Option
Description



max_depth
Maximum depth before reporting errors (default 3)


ignore_parent_selectors
Whether to report errors for parent selectors (default false)

Configuration Option	Description
`max_depth`	Maximum depth before reporting errors (default 3)
`ignore_parent_selectors`	Whether to report errors for parent selectors (default false)