shadow-scss
A set of two Sass functions (box-shadow() and text-shadow()) to write multiple shadows.
Installation
With npm,
npm install shadow-scss
or just copy the content of the _shadow.scss file into your Sass directory.
Usage
With npm,
@import "shadow-scss";
or just @import the _shadow.scss partial into your Sass project.
box-shadow()
box-shadow: box-shadow(
$color: #000,
$step: 2px,
$count: 10
)text-shadow()
text-shadow: text-shadow(
$color: #ccc,
$stepX: -.5px,
$stepY: .5px,
$count: 50
)Options
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,
@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.
License
MIT © Utkarsh Verma