shadow-scss

A set of two Sass functions (box-shadow() and text-shadow()) to write multiple shadows.

Examples

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.

Refer to the MDN Web Docs for box-shadow and text-shadow for a better understanding of the native parameters.

License

MIT © Utkarsh Verma