Set of two Sass functions (box-shadow and text-shadow) to write multiple shadows
npm install shadow-scss[npm-image]: https://img.shields.io/npm/v/shadow-scss.svg
[npm-url]: https://npmjs.org/package/shadow-scss
[license-image]: https://img.shields.io/github/license/n3r4zzurr0/range-slider-input.svg
[license-url]: https://github.com/n3r4zzurr0/range-slider-input/blob/main/LICENSE
A set of two Sass functions (box-shadow() and text-shadow()) to write multiple shadows.
With npm,
``
npm install shadow-scss
or just copy the content of the file into your Sass directory.
With npm,
`
@import "shadow-scss";
or just the _shadow.scss partial into your Sass project.
box-shadow()
`scss`
box-shadow: box-shadow(
$color: #000,
$step: 2px,
$count: 10
)
text-shadow()
`scss`
text-shadow: text-shadow(
$color: #ccc,
$stepX: -.5px,
$stepY: .5px,
$count: 50
)
For $x, $y, $blur-radius, $spread-radius, $color, $step, $stepX and $stepY, custom functions can also be passed through, when writing multiple shadows. These functions are called with 2 parameters ($i and $count) and can be defined as,
`scss`
@function func-name($i, $count) {
@return calc($i / $count) * 5px;
}
where $i denotes the nth shadow and $count is the total number of shadows which was initially defined.
| Parameter | box-shadow() | text-shadow() | Default Value | Description |
|---|---|---|---|---|
$inset | ☑ | ☒ | false | Boolean value that specifies if the inset keyword is to be included or not. |
$x | ☑ | ☑ | 0 | Number or Function that specifies the horizontal distance. |
$y | ☑ | ☑ | 0 | Number or Function that specifies the vertical distance. |
$blur-radius | ☑ | ☑ | 0 | Number or Function that specifies the blur amount. |
$spread-radius | ☑ | ☒ | 0 | Number or Function that specifies the spread amount. |
$color | ☑ | ☑ | #000 | Color or Function that specifies the color. |
$step | ☑ | ☑ | 0 | Number or Function that specifies the horizontal and the vertical difference between the distances of the shadows. |
$stepX | ☑ | ☑ | null | Number or Function that specifies the horizontal difference between the distances of the shadows. If its value is null (default), the value of $step is used. |
$stepY | ☑ | ☑ | null | Number or Function that specifies the vertical difference between the distances of the shadows. If its value is null (default), the value of $step is used. |
$count | ☑ | ☑ | 1 | Number that specifies the number of shadows to be written. |
Refer to the MDN Web Docs for box-shadow and text-shadow` for a better understanding of the native parameters.
MIT © Utkarsh Verma