question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rule idea: dollar-variable-pattern

See original GitHub issue

Following my question on SO (http://stackoverflow.com/questions/36304921) I’m proposing to add a rule to enforce a naming convention for variable names in SCSS.

Something like https://github.com/sasstools/sass-lint/pull/257 would be great I reckon, where we could either specify a string for a preferred common format (camelcase, snakecase etc…) or a custom pattern.

For example I may want my variable names to always be camel case, in which case:

// this wouldn't be correct
$my-variable: #000;

// but this would be correct
$myVariable: #000;

I don’t have experience in writing plugins for stylelint but I may give it a try based on the other rules in this repo and try to work something out in a PR if it’s of any use to anybody else.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8

github_iconTop GitHub Comments

2reactions
Arcanorumcommented, Dec 25, 2020

I think the docs for this need updating. No mention of how to use this. https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/dollar-variable-pattern/README.md

0reactions
Arkkimaagicommented, Jun 22, 2022

@Arcanorum if you or someone else have not solved this already, I had luck by adding this to my .stylelintrc.yaml in the rules part:

scss/dollar-variable-pattern: "^-?[a-z][a-z0-9]*(--?[a-z0-9]+)*$"

I wanted to allow a bit more bem-like formatting in our dollar variables like: $-details-tag--large

I agree that the documentation could be better.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rule idea: dollar-variable-pattern · Issue #8 · stylelint-scss ...
Following my question on SO (http://stackoverflow.com/questions/36304921) I'm proposing to add a rule to enforce a naming convention for ...
Read more >
Makepp Rules - SourceForge
The rule action does not mention the automatic variable $(outputs) (or its synonym $(targets)). This is not a pattern rule, and there is...
Read more >
stylelint-scss - npm
dollar-variable-no-missing-interpolation : Disallow Sass variables that are used without interpolation with CSS features that use custom ...
Read more >
GNU Make - Writing Rules - MIT
Because dollar signs are used to start variable references, if you really want a dollar sign in a rule you must write two...
Read more >
Lecture 4A: Pattern Matching and Rule-based Substitution
MIT 6.001 Structure and Interpretation of Computer Programs, Spring 2005Instructor: Harold Abelson, Gerald Jay Sussman, Julie SussmanView ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found