Css Variables Replacer
A vscode extension helps replacing CSS properties with CSS variables on .css/.less/.scss/.vue files, with extensive support for industry-level needs.
Bug reports
What's for?
Given a style variables declaration files (either local or cloud-deployed), Css Code Action proivides dynamic dianostcis and quick fix options to current stylesheet file. This will help developers effortlessly replace numeric style properties with neat concise style variables on their existing files.
Usage
prepare your style variables declaration files
style variables declaration file could be local
and it could be cloud-deployed
-
in your settings
now move to the file you are working on
Compility
-
CSS Variables Replacer can read from declaration files in .css/.less/.scss. Diagnostics and fixes
can be made to files in .css/.less/.scss/.vue
check screenshots and tests for more examples
Auto Transfers
black, [#000000](https://github.com/jorschac/vscode-css-action/issues/000000), hsl(0deg, 0%, 0%), hwb(0deg, 0%, 100%), rgba(0,0,0) are actually refering to the same color. Distinguishing them shouldn't be your concern. By adding anyone of above to declaration file, all
rest of values can be detected automatically if used inappropriately in stylesheet files.
e.g
you have following statement in your declaration file:
:root {
--text-color: [#000000](https://github.com/jorschac/vscode-css-action/issues/000000);
}
All of following should be "waved and fixable"
.background {
color: [#000000](https://github.com/jorschac/vscode-css-action/issues/000000);
/**
color: [#000](https://github.com/jorschac/vscode-css-action/issues/000);
color: black;
color: rgba(0,0,0)
color: hsl(0deg, 0%, 0%)
color: hwb(0deg, 0%, 100%)
*/
}
Config
for those who may not know, you can configure it in settins.json or File -> Settings...
baseDir
Base directory to your variables file. Ideally the shared root path to all your declaration files. Default
value will be the toppest directory of your project.
example:
cssReplacer.baseDir='/Users/name_1/dir_2/project_3'
variablesFile
style variables file path. multiple files paths should be seperated by coma
example:
cssReplacer.variablesFile='src/variables/vriable.css'
In this case, final absolute path to your variable file will be:
'/Users/name_1/dir_2/project_3/src/variables/vriable.css'
severity
severity level of diagnostics
0 - disable,
1 - information,
2 - warning,
3 - error,
default value is 2
🤔 Following settings are not recommanded to change, but still you can change them, as long as you know what you are doing 🤔
ejs render context:
{
_VAR_NAME_: 'color and size var name defined in variablesFile',
_MATCHED_TEXT_: 'origin text matched by regex',
_REM_RESULT_: 'rem result converted from px value based on rootFontSize, only in `colorReplaceOptions`'
}
Color Replace
color replace help replace hex css string to color variable defined in (scss/less) file.
{
"cssReplacer.variablesFile": "src/style/variables.scss",
"cssReplacer.colorReplaceOptions": ["<%= _VAR_NAME_ %>"]
}
Px convert
px convert help convert px to sccc/less func or auto calc based on root font size.
{
"cssReplacer.rootFontSize": 16,
"cssReplacer.pxReplaceOptions": [
"<%= _VAR_NAME_ %>",
"<%= _REM_RESULT_ %>",
"px2rem(<%= _MATCHED_TEXT_ %>)"
]
}
Special Thanks
Great Great thanks to vscode-css-action and vscode-css-variables. Thanks for ideas and inspirations 🚀
| |