https://github.com/outstand/postcss-lighten-darken
https://github.com/outstand/postcss-lighten-darken
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/outstand/postcss-lighten-darken
- Owner: outstand
- License: mit
- Created: 2022-10-27T14:44:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-27T14:49:09.000Z (over 2 years ago)
- Last Synced: 2025-01-30T00:18:44.810Z (4 months ago)
- Language: JavaScript
- Size: 63.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-lighten-darken
[PostCSS] plugin to add sass-style lighten/darken.
[PostCSS]: https://github.com/postcss/postcss
Basic usage:
```css
.foo {
td { background: lighten(#5E6469, 57%); }
background: darken(#f0f0f0, 15%);
}
```
```css
.foo {
td { background: hsla(207, 6%, 96%, 1); }
background: hsla(0, 0%, 79%, 1);
}
```
Nested usage (w/ postcss-simple-vars):
```css
$primary-color: #5E6469;
$table-stripe-color: lighten($primary-color, 57%);
.foo {
td { background: darken($table-stripe-color, 3%); }
}
```
```css
.foo {
td { background: hsla(207, 6%, 93%, 1); }
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-lighten-darken
```
**Step 2:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-lighten-darken'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage