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 # shadow-scss [![npm][npm-image]][npm-url] [![license][license-image]][license-url] A set of two Sass functions (`box-shadow()` and `text-shadow()`) to write multiple shadows. **[Examples](https://n3r4zzurr0.in/shadow-scss/)** ## Installation With npm, ``` npm install shadow-scss ``` or just copy the content of the [`_shadow.scss`](https://raw.githubusercontent.com/n3r4zzurr0/shadow-scss/main/_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()`** ```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 ) ``` ## 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, ```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. <table> <tr> <th>Parameter</th> <th><code>box-shadow()</code></th> <th><code>text-shadow()</code></th> <th>Default Value</th> <th>Description</th> </tr> <tr> <td><code>$inset</code></td> <td>☑</td> <td>☒</td> <td><code>false</code></td> <td>Boolean value that specifies if the <code>inset</code> keyword is to be included or not.</td> </tr> <tr> <td><code>$x</code></td> <td>☑</td> <td>☑</td> <td><code>0</code></td> <td>Number or Function that specifies the horizontal distance. </td> </tr> <tr> <td><code>$y</code></td> <td>☑</td> <td>☑</td> <td><code>0</code></td> <td>Number or Function that specifies the vertical distance. </td> </tr> <tr> <td><code>$blur-radius</code></td> <td>☑</td> <td>☑</td> <td><code>0</code></td> <td>Number or Function that specifies the blur amount.</td> </tr> <tr> <td><code>$spread-radius</code></td> <td>☑</td> <td>☒</td> <td><code>0</code></td> <td>Number or Function that specifies the spread amount.</td> </tr> <tr> <td><code>$color</code></td> <td>☑</td> <td>☑</td> <td><code>#000</code></td> <td>Color or Function that specifies the color.</td> </tr> <tr> <td><code>$step</code></td> <td>☑</td> <td>☑</td> <td><code>0</code></td> <td>Number or Function that specifies the horizontal and the vertical difference between the distances of the shadows.</td> </tr> <tr> <td><code>$stepX</code></td> <td>☑</td> <td>☑</td> <td><code>null</code></td> <td>Number or Function that specifies the horizontal difference between the distances of the shadows.<br/><br/>If its value is <code>null</code> (default), the value of <code>$step</code> is used.</td> </tr> <tr> <td><code>$stepY</code></td> <td>☑</td> <td>☑</td> <td><code>null</code></td> <td>Number or Function that specifies the vertical difference between the distances of the shadows.<br/><br/>If its value is <code>null</code> (default), the value of <code>$step</code> is used.</td> </tr> <tr> <td><code>$count</code></td> <td>☑</td> <td>☑</td> <td><code>1</code></td> <td>Number that specifies the number of shadows to be written.</td> </tr> </table> <br/> Refer to the MDN Web Docs for [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#values) and [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#values) for a better understanding of the native parameters. ## License MIT © [Utkarsh Verma](https://github.com/n3r4zzurr0)