stylelint-config-recommended-scss
Advanced tools
The stylelint-config-recommended-scss package is a Stylelint configuration that provides a set of recommended rules for SCSS (Sass) files. It helps enforce consistent coding styles and best practices in SCSS, ensuring that your stylesheets are clean, maintainable, and free of common errors.
Basic SCSS Linting
This feature ensures that your SCSS files adhere to a set of recommended rules, catching common errors and enforcing best practices. For example, it can catch issues like missing semicolons, incorrect nesting, and more.
/* Example SCSS file */
$primary-color: #333;
body {
color: $primary-color;
font-size: 16px;
}
Variable Naming Conventions
This feature enforces consistent naming conventions for variables, ensuring that they are named in a way that is easy to understand and maintain. For example, it can enforce the use of hyphens or underscores in variable names.
/* Example SCSS file */
$primary-color: #333;
$secondary-color: #666;
body {
color: $primary-color;
}
Nesting Rules
This feature enforces best practices for nesting rules in SCSS, ensuring that your stylesheets are organized and easy to read. For example, it can enforce a maximum depth for nested rules to prevent overly complex stylesheets.
/* Example SCSS file */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
The stylelint-config-standard package provides a standard set of rules for CSS and SCSS linting. It is similar to stylelint-config-recommended-scss but is more general, covering both CSS and SCSS. It is a good choice if you need a broader set of linting rules.
The stylelint-config-sass-guidelines package is based on the Sass Guidelines by Hugo Giraudel. It provides a comprehensive set of rules specifically for SCSS, making it a good alternative to stylelint-config-recommended-scss if you are looking for a more opinionated set of rules.
The stylelint-config-recommended package provides a minimal set of rules for CSS linting. It is less comprehensive than stylelint-config-recommended-scss but can be a good starting point if you want to build your own custom configuration.
The recommended shareable SCSS config for stylelint.
This config:
stylelint-config-recommended shared config and configures its rules for SCSSstylelint-scss plugin pack and turns on its rules that check for possible errorspostcss-scss custom syntax and configures itThis config is extended by the stylelint-config-standard-scss shared config. That config is better suited to most users as it also turns on the stylistic rules in the stylelint-scss plugin pack.
To see the rules that this config uses, please read the config itself.
npm install --save-dev stylelint-config-recommended-scss
Set your stylelint config to:
{
"extends": "stylelint-config-recommended-scss"
}
Simply add a "rules" key to your config, then add your overrides and additions there.
For example, to turn off the scss/at-if-no-null rule:
{
"extends": "stylelint-config-recommended-scss",
"rules": {
"scss/at-if-no-null": null
}
}
FAQs
The recommended shareable SCSS config for Stylelint
We found that stylelint-config-recommended-scss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.