https://github.com/oti/smooth-gradient-sass-function
https://github.com/oti/smooth-gradient-sass-function
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/oti/smooth-gradient-sass-function
- Owner: oti
- License: mit
- Created: 2018-05-02T06:07:58.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2023-07-07T22:27:38.000Z (almost 3 years ago)
- Last Synced: 2025-08-31T20:54:37.507Z (9 months ago)
- Language: SCSS
- Size: 1000 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# Smooth Gradient Sass Function
Inspired by [Naoki Matsuda's Pen](https://codepen.io/readymadegogo/pen/pPLJgR) & [Lukas Hermann's Pen](https://codepen.io/lhermann/pen/qmpMGQ).
[](https://app.netlify.com/sites/smooth-gradient-sass-function/deploys)
- **v3.x is compatible to dart-sass.**
- [v2.x](https://github.com/oti/smooth-gradient-sass-function/tree/v2.1.0) is compatible to libsass(node-sass).
## You can get smooth gradient sass function
Gradients are scrim, easeOutSine, and clothoid curve.
```scss
// `scrim` smoothing
@function scrim($color: #000000, $opacity: 1, $start: 0, $end: 100%) {
// validate arguments
// ...
$scrim: (
1: 0,
0.738: 0.19,
0.541: 0.34,
0.382: 0.47,
0.278: 0.565,
0.194: 0.65,
0.126: 0.73,
0.075: 0.802,
0.042: 0.861,
0.021: 0.91,
0.008: 0.952,
0.002: 0.982,
0: 1,
);
@return _make-gradient-list($scrim, $color, $opacity, $start, $end);
}
@function _make-gradient-list($map, $color, $opacity, $start, $end) {
$color-stops: ();
@each $key, $mod in $map {
$position: $mod * ($end - $start) + $start;
$new-stop: color.change($color, $alpha: $key * $opacity);
$color-stops: list.append($color-stops, $new-stop $position, "comma");
}
@return $color-stops;
}
```
```scss
// `easeOutSine` smoothing
@function easeOutSine($color: #000000, $opacity: 1, $start: 0, $end: 100%) {
// validate arguments
// ...
$easeOutSine: (
1: 0,
0.917: 0.053,
0.834: 0.106,
0.753: 0.159,
0.672: 0.213,
0.591: 0.268,
0.511: 0.325,
0.433: 0.384,
0.357: 0.445,
0.283: 0.509,
0.213: 0.577,
0.147: 0.65,
0.089: 0.729,
0.042: 0.814,
0.011: 0.906,
0: 1,
);
@return _make-gradient-list($easeOutSine, $color, $opacity, $start, $end);
}
```
```scss
// `clothoid` smoothing
@function clothoid($color: #000000, $opacity: 1, $start: 0, $end: 100%) {
// validate arguments
// ...
$clothoid: (
1: 0,
0.3: 0.5,
0.15: 0.65,
0.075: 0.755,
0.037: 0.8285,
0.019: 0.88,
0: 1,
);
@return _make-gradient-list($clothoid, $color, $opacity, $start, $end);
}
```
## Usage
### from git
1. git clone and move to your project.
```bash
git clone git@github.com:oti/smooth-gradient-sass-function.git
mv smooth-gradient-sass-function/src/_smooth-gradient.scss your/project/scss/path
```
2. `@use` in your .scss file.
```scss
@use "your/project/scss/path/smooth-gradient" as gradients;
```
### from npm
1. npm install.
```shell
npm i smooth-gradient-sass-function
```
2. `@use` in your .scss file.
```scss
@use "../(to project root)/node_modules/smooth-gradient-sass-function" as gradients;
```
### write function
3. write `gradients.scrim()` sass function and argument in argument of native `linear-gradient()` function.
```scss
.elem {
// default color is `#000`, start opacity is `1`
background-image: linear-gradient(to bottom, gradients.scrim());
}
```
## Any angel, Any color, Any opacity
```scss
.box {
// start left
background-image: linear-gradient(to right, gradients.scrim());
}
```
```scss
.box {
// start left bottom
background-image: linear-gradient(45deg, gradients.scrim());
}
```
```scss
.box {
// 1st arg is start color code(default: #000)
background-image: linear-gradient(to bottom, gradients.scrim(#ff0000));
}
```
```scss
.box {
// 2nd arg is start opacity(default: 1)
background-image: linear-gradient(to bottom, gradients.scrim(#ffff00, 0.5));
}
```
```scss
.box {
// 3rd arg is start position
background-image: linear-gradient(
to bottom,
gradients.scrim(#ffff00, 0.5, $start: 50%)
);
}
```
```scss
.box {
// 4th arg is end position
background-image: linear-gradient(
to bottom,
gradients.scrim(#ffff00, 0.5, $start: 0, $end: 16em)
);
}
```
## LICENSE
[MIT license Copyright (c) 2018 oti](LICENSE.txt)