1.0.4 • Published 12 months ago
vw-calc v1.0.4
vw-calc()
vw-calc() is a Sass function that scales pixel-based value(s) proportionally and accessible.
Getting Started
Follow these steps to setup your project.
Installation
Install the package
npm install --save-dev vw-calc
Parameters
vw-calc(
$values,
$wide-width,
$narrow-width,
$narrow,
$clamp,
$dynamic,
$base-font-size
)| Name | Type | Default | Description |
|---|---|---|---|
$values | number - ($min-value, $max-value, $limit-value) | One parameter required. Up to 3 (three) parameters allowed | |
$wide-width | number | 1440 | Unitless pixel-based value for wide screens |
$narrow-width | number | 375 | Unitless pixel-based value for narrow screens |
$narrow | boolean | false | If enabled $values MUST have 1 (one) parameter, which will be treated as the $max-value, then it will set $min-value to 0. This helpful when the scaling will happen on narrow screens. |
$clamp | boolean | false | Enable to avoid the returned value to scale beyond $wide-width |
$dynamic | boolean | false | If enabled $values MUST have 1 (one) parameter, which will be treated as the $max-value, then it will apply a mathematical rule of three to calculate $min-value |
$base-font-size | number | 16 | Default base font size for most browsers |
Usage
Import the function with Sass
@userule@use 'vw-calc';OR with an alias:
@use 'vw-calc' as vw;Change the default values as needed prepending
$default-to the parameter name, e.g:@use 'vw-calc' as vw with ( $default-wide-width: 1200, $default-narrow-width: 425 );OR
Passing the values directly in the Sass function, e.g:
vw-calc(16 32, wide-width: 1200, narrow-width: 425);