0.4.2 • Published 4 years ago
postcss-color-variable v0.4.2
PostCSS Color Variable
PostCSS plugin color variable. Auto replace color value with corresponding variable name. Now support Less and Sass
Define color variable name file:
@link-color: #0a1;
Input:
.foo {
color: #0a1;
background: rgb(170, 170, 170);
border: 1px solid rgba(170, 170, 170, 0.1);
}
Output:
.foo {
color: @link-color;
background: @link-color;
border: 1px solid fade(@link-color, 10%);
}
Config
Create file .colorvarrc.json
in project.
{
"variableFiles": ["./src/color.less"], // define color variable file path
"syntax": "less", // syntax,support less, sass. default is less
"autoImport": "true", // if auto import variable file
"alias": {
"@": "./src" // equal webpack alias
},
"usingAlias": "@", // when auto import variable file, using alias. for example @import '~@/src/color.less'
"singleQuote": false, // auto import if using single quote. default is false
}
Use
CLI
# install plugin
npm install postcss-color-variable --save-dev
# auto replace by cli
./node_modules/.bin/postcss-color-variable src/index.less
# set syntax by --syntax
./node_modules/.bin/postcss-color-variable src/index.scss --syntax scss
VSCode Extension
https://marketplace.visualstudio.com/items?itemName=zengxb94.color-variable&ssr=false#overview
Use in WebStorm
WebStorm replace Less file
- Install plugin:
npm install postcss-color-variable --save-dev
- Open
Preferences -> File Watchers -> Add
- Settings
- Name:
Color Variable Less
- File type:
Less Style Sheet
- Program:
$ProjectFileDir$/node_modules/.bin/postcss-color-variable
- Arguments:
$FilePathRelativeToProjectRoot$
- Output paths to refresh:
$FilePathRelativeToProjectRoot$
- Working Directory:
$ProjectFileDir$
- set Auto-save edited files to trigger watcher unchecked
- set Trigger The watcher on external changes unchecked
WebStorm replace Sass file
- Install plugin:
npm install postcss-color-variable --save-dev
- Open
Preferences -> File Watchers -> Add
- Settings
- Name:
Color Variable Sass
- File type:
Sass Style Sheet
- Program:
$ProjectFileDir$/node_modules/.bin/postcss-color-variable
- Arguments:
$FilePathRelativeToProjectRoot$
- Output paths to refresh:
$FilePathRelativeToProjectRoot$
- Working Directory:
$ProjectFileDir$
- set Auto-save edited files to trigger watcher unchecked
- set Trigger The watcher on external changes unchecked
0.4.2
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.0
4 years ago
0.3.1
4 years ago
0.2.4
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.0
4 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.3
4 years ago
0.0.4
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago