shadow-scss

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.

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