Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@littlemissrobot/sass-functions
Advanced tools
@littlemissrobot/sass-functions - npm Package Compare versions
Comparing version 1.1.2 to 2.0.0
| { | ||
| "name": "@littlemissrobot/sass-functions", | ||
| "version": "1.1.2", | ||
| "description": "Little Miss Robot sass functions library that helps execute reusable and complex tasks ", | ||
| "main": "index.js", | ||
| "version": "2.0.0", | ||
| "description": "Little Miss Robot sass functions library that helps execute reusable and complex tasks.", | ||
| "main": "index.scss", | ||
| "scripts": { | ||
| "start": "NODE_ENV=DEVELOPMENT ./node_modules/.bin/gulp start --gulpfile .gulpfile.js", | ||
| "build": "NODE_ENV=PRODUCTION ./node_modules/.bin/gulp build --gulpfile .gulpfile.js", | ||
| "prepublishOnly": "npm run build" | ||
| "start": "sass tests.scss:dist/tests.css --watch --load-path=node_modules", | ||
| "lint": "stylelint './lib/**/*.scss'" | ||
| }, | ||
@@ -23,4 +22,3 @@ "repository": { | ||
| "files": [ | ||
| "scss", | ||
| "_index.scss" | ||
| "lib" | ||
| ], | ||
@@ -30,17 +28,11 @@ "publishConfig": { | ||
| }, | ||
| "dependencies": { | ||
| "sass": "1.32.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@littlemissrobot/stylelint-config": "^1.1.0", | ||
| "browser-sync": "^2.26.12", | ||
| "del": "^5.1.0", | ||
| "gulp": "^4.0.2", | ||
| "gulp-postcss": "^8.0.0", | ||
| "gulp-sass": "^4.1.0", | ||
| "gulp-sourcemaps": "^2.6.5", | ||
| "gulp-stylelint": "^13.0.0", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "postcss-scss": "^2.1.1" | ||
| }, | ||
| "dependencies": { | ||
| "sass": "^1.26.10" | ||
| "@commitlint/cli": "11.0.0", | ||
| "@commitlint/config-conventional": "11.0.0", | ||
| "@littlemissrobot/stylelint-config": "2.0.0", | ||
| "husky": "4.3.7" | ||
| } | ||
| } |
474
README.md
| # Little Miss Robot - Sass functions | ||
| > This repository contains Sass (Dart Sass) based functions that we, at Little | ||
| > Miss Robot, like to use to make our wonderful lives in the world of SASS more | ||
| > This package contains Sass (Dart Sass) based functions that we, at Little Miss | ||
| > Robot, like to use to make our wonderful lives in the world of SASS more | ||
| > wondeful. These functions are also mainly used throughout our other libraries | ||
@@ -13,15 +13,16 @@ > to manage recurring tasks. | ||
| This library makes use of [Dart Sass](https://sass-lang.com/dart-sass), which is | ||
| the primary implementation of Sass. Make sure that your Sass compiler is making | ||
| use of Dart Sass. | ||
| - **Make use of [Dart Sass](https://sass-lang.com/dart-sass):** | ||
| This means that if you are using a task manager (like Gulp) or a module bundler | ||
| (like Webpack), you must indicate which compiler it should use for compiling | ||
| Sass to CSS. | ||
| This library makes use of [Dart Sass](https://sass-lang.com/dart-sass), which | ||
| is the primary implementation of Sass. Make sure that your Sass compiler is | ||
| making use of Dart Sass. | ||
| Furthermore, this library makes heavy use of Sass modules: | ||
| [`@use`](https://sass-lang.com/documentation/at-rules/use). Therefore we | ||
| recommend importing and using this library with the `@use` statement. | ||
| - **Generate only what you need:** | ||
| This library generates classes based on your configuration. The larger the | ||
| configuration, the more css, the larger the CSS file. DO NOT enable all the | ||
| config options, but only the ones you actually use and need! | ||
| ## Install | ||
| ```sh | ||
@@ -48,3 +49,3 @@ # As a dependency | ||
| h1 { | ||
| margin-bottom: _functions.px_rem(16px); | ||
| margin-bottom: _functions.math_px-rem(16px); | ||
| } | ||
@@ -55,3 +56,4 @@ ``` | ||
| namespaces, where functions related to a `map` are namespaced with | ||
| `_functions.map_[FUNCTION-NAME]` or a `list` would be `_functions.list_[FUNCTION-NAME]`. | ||
| `_functions.map_[FUNCTION-NAME]` or a `list` would be | ||
| `_functions.list_[FUNCTION-NAME]`. | ||
@@ -63,10 +65,10 @@ ### Through the partial entry points | ||
| ```scss | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-functions/px" as _px; | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-functions/lib/math" as _math; | ||
| ``` | ||
| 2. Functions are now available within the `_px` namespace: | ||
| 2. Functions are now available within the `_math` namespace: | ||
| ```scss | ||
| h1 { | ||
| margin-bottom: _px.rem(16px); | ||
| margin-bottom: _math.px-rem(16px); | ||
| } | ||
@@ -78,9 +80,7 @@ ``` | ||
| * `"sass-functions/list" as _list;` | ||
| * `"sass-functions/map" as _map;` | ||
| * `"sass-functions/math" as _math;` | ||
| * `"sass-functions/number" as _number;` | ||
| * `"sass-functions/px" as _px;` | ||
| * `"sass-functions/rem" as _rem;` | ||
| * `"sass-functions/string" as _string;` | ||
| - `"sass-functions/lib/list" as _list;` | ||
| - `"sass-functions/lib/map" as _map;` | ||
| - `"sass-functions/lib/math" as _math;` | ||
| - `"sass-functions/lib/number" as _number;` | ||
| - `"sass-functions/lib/string" as _string;` | ||
@@ -91,3 +91,3 @@ ## Functions | ||
| These functions are namespace with **list_**: | ||
| These functions are namespace with **list\_**: | ||
@@ -103,3 +103,3 @@ ```scss | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -115,7 +115,7 @@ _list.includes($list, 5); | ||
| * **$list**: the list to search within | ||
| * **$item**: the item to search for in the list | ||
| - **$list**: the list to search within | ||
| - **$item**: the item to search for in the list | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -128,3 +128,3 @@ $list: (1, 2, 3, 4, 5); | ||
| #### is-low-to-high($list) | ||
| #### is-numbers-order-low-high($list) | ||
@@ -135,6 +135,6 @@ Checks if the numbers in the list are ordered lowest to highest. | ||
| * **$list**: the list which contains the numbers. | ||
| - **$list**: the list which contains the numbers. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -144,7 +144,7 @@ $list1: (2, 1, 3); | ||
| _list.is-low-to-high($list1); // false | ||
| _list.is-low-to-high($list2); // true | ||
| _list.is-numbers-order-low-high($list1); // false | ||
| _list.is-numbers-order-low-high($list2); // true | ||
| ``` | ||
| #### merge-unique($lists...) | ||
| #### merge-uniques($lists...) | ||
@@ -155,6 +155,6 @@ Merges multiple lists and removes any duplicates. | ||
| * **$lists...**: any amount of lists to merge together | ||
| - **$lists...**: any amount of lists to merge together | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -165,3 +165,3 @@ $list1: (1, 2, 3); | ||
| _list.merge-unique($list1, $list2, $list3); // (1, 2, 3, 4, 5, 6, 7, 8) | ||
| _list.merge-uniques($list1, $list2, $list3); // (1, 2, 3, 4, 5, 6, 7, 8) | ||
| ``` | ||
@@ -175,6 +175,6 @@ | ||
| * **$list**: the list to remove the duplicates from | ||
| - **$list**: the list to remove the duplicates from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -186,2 +186,38 @@ $list: (1, 2, 3, 1, 3, 4, 5); | ||
| #### remove-values($list, $values) | ||
| Removes a list of values from the passed list. | ||
| Parameters: | ||
| - **$list**: the list to remove the values from. | ||
| - **$values**: the list of values to remove from the list. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
| $list: (1, 2, 3, 4, 5); | ||
| $values: (1, 2); | ||
| _list.remove-values($list, $values); // (3, 4, 5) | ||
| ``` | ||
| #### remove-value($list, $value) | ||
| Removes a value from the passed list. | ||
| Parameters: | ||
| - **$list**: the list to remove the value from. | ||
| - **$value**: the value to remove from the list. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
| $list: (1, 2, 3, 4, 5); | ||
| $value: 1; | ||
| _list.remove-value($list, $value); // (2, 3, 4, 5) | ||
| ``` | ||
| #### reverse($list) | ||
@@ -193,6 +229,6 @@ | ||
| * **$list**: the list to reverse the order of the items. | ||
| - **$list**: the list to reverse the order of the items. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
@@ -204,3 +240,3 @@ $list: (1, 2, 3, 4, 5); | ||
| #### sort-low-to-high($list) | ||
| #### order-numbers-low-high($list) | ||
@@ -211,10 +247,10 @@ Sorts a list of numbers from lowest to highest. | ||
| * **$list**: the list to sort. | ||
| - **$list**: the list to sort. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| @use "@littlemissrobot/sass-functions/lib/list" as _list; | ||
| $list: (2, 1, 5, 3, 4); | ||
| _list.sort-low-to-high($list); // (1, 2, 3, 4, 5) | ||
| _list.order-numbers-low-high($list); // (1, 2, 3, 4, 5) | ||
| ``` | ||
@@ -224,3 +260,3 @@ | ||
| These functions are namespace with **map_**: | ||
| These functions are namespace with **map\_**: | ||
@@ -236,3 +272,3 @@ ```scss | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -249,6 +285,6 @@ _map.includes($map, color); | ||
| * **$maps**: any amount of maps to merge together | ||
| - **$maps**: any amount of maps to merge together | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -271,3 +307,3 @@ $map1: ( | ||
| _map.sort-low-to-high($map1, $map2, $map3); | ||
| _map.collect($map1, $map2, $map3); | ||
| // result: ( | ||
@@ -292,7 +328,7 @@ // display: flex; | ||
| * **$map**: The map to retrieve the value from | ||
| * **$path**: The path of keys to the value | ||
| - **$map**: The map to retrieve the value from | ||
| - **$path**: The path of keys to the value | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -325,3 +361,3 @@ $colors: ( | ||
| #### get-from-list($map, $list) | ||
| #### filter-by-list($map, $list) | ||
@@ -333,7 +369,7 @@ Generate a new map of items, based on the values within the list, which | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new map from | ||
| - **$map**: The map with the keys and values | ||
| - **$list**: The list to create a new map from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -351,3 +387,3 @@ $breakpoints: ( | ||
| _map.get-from-list($breakpoints, $list1); | ||
| _map.filter-by-list($breakpoints, $list1); | ||
| // result: ( | ||
@@ -358,3 +394,3 @@ // viewport-7: 720px, | ||
| _map.get-from-list($breakpoints, $list2); | ||
| _map.filter-by-list($breakpoints, $list2); | ||
| // result: ( | ||
@@ -367,3 +403,3 @@ // viewport-3: 360px, | ||
| #### get-keys-from-list($map, $list) | ||
| #### filter-keys-by-list($map, $list) | ||
@@ -375,7 +411,7 @@ Generate a new list of keys from a map, based on the items within a map and a | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new list from | ||
| - **$map**: The map with the keys and values | ||
| - **$list**: The list to create a new list from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -393,10 +429,10 @@ $breakpoints: ( | ||
| _map.get-keys-from-list($breakpoints, $list1); | ||
| _map.filter-keys-by-list($breakpoints, $list1); | ||
| // result: (viewport-7, viewport-9); | ||
| _map.get-keys-from-list($breakpoints, $list2); | ||
| _map.filter-keys-by-list($breakpoints, $list2); | ||
| // result: (viewport-3, viewport-9, viewport-12); | ||
| ``` | ||
| #### get-values-from-list($map, $list) | ||
| #### filter-values-by-list($map, $list) | ||
@@ -408,7 +444,7 @@ Generate a new list of values from a map, based on the items within a map and a | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new list from | ||
| - **$map**: The map with the keys and values | ||
| - **$list**: The list to create a new list from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -426,6 +462,6 @@ $breakpoints: ( | ||
| _map.get-values-from-list($breakpoints, $list1); | ||
| _map.filter-values-by-list($breakpoints, $list1); | ||
| // result: (720px, 992px); | ||
| _map.get-values-from-list($breakpoints, $list2); | ||
| _map.filter-values-by-list($breakpoints, $list2); | ||
| // result: (360px, 992px, 1200px); | ||
@@ -440,7 +476,7 @@ ``` | ||
| * **$map**: The map to search | ||
| * **$key**: The item to search for | ||
| - **$map**: The map to search | ||
| - **$key**: The item to search for | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -459,3 +495,3 @@ $breakpoints: ( | ||
| #### is-low-to-high($map) | ||
| #### is-numbers-order-low-high($map) | ||
@@ -466,6 +502,6 @@ Checks if the numbers, as values, in the map are ordered lowest to highest. | ||
| * **$map**: the map which contains the keys with its number. | ||
| - **$map**: the map which contains the keys with its number. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -484,4 +520,4 @@ $map1: ( | ||
| _map.is-low-to-high($map1); // false | ||
| _map.is-low-to-high($map2); // true | ||
| _map.is-numbers-order-low-high($map1); // false | ||
| _map.is-numbers-order-low-high($map2); // true | ||
| ``` | ||
@@ -495,6 +531,6 @@ | ||
| * **$map**: the map to reverse the order of the items. | ||
| - **$map**: the map to reverse the order of the items. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -526,7 +562,7 @@ $breakpoints: ( | ||
| * **$map**: the map to trim | ||
| * **$target**: the target key to trim the map to. | ||
| - **$map**: the map to trim | ||
| - **$target**: the target key to trim the map to. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| @use "@littlemissrobot/sass-functions/lib/map" as _map; | ||
@@ -551,3 +587,3 @@ $breakpoints: ( | ||
| These functions are namespace with **math_**: | ||
| These functions are namespace with **math\_**: | ||
@@ -563,3 +599,3 @@ ```scss | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| @use "@littlemissrobot/sass-functions/lib/math" as _math; | ||
@@ -569,3 +605,3 @@ _math.pow(8, 2); | ||
| #### Decimal($value, $amount) | ||
| #### round-decimal($value, $amount) | ||
@@ -576,13 +612,13 @@ Round a number's value after the comma (decimals) to a certain amount. | ||
| * **$value**: The number and its decimals to round | ||
| * **$target**: The target amount to round the decimals to | ||
| - **$value**: The number and its decimals to round | ||
| - **$target**: The target amount to round the decimals to | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| @use "@littlemissrobot/sass-functions/lib/math" as _math; | ||
| _math.decimal(1.12345, 2); // 1.12 | ||
| _math.decimal(1.123456789, 5); // 1.12346 | ||
| _math.round-decimal(1.12345, 2); // 1.12 | ||
| _math.round-decimal(1.123456789, 5); // 1.12346 | ||
| ``` | ||
| #### Pow($number, $exponent) | ||
| #### pow($number, $exponent) | ||
@@ -594,7 +630,7 @@ Power function / exponent operator which accepts positive, negative (integer, | ||
| * **$number**: The number to apply the exponent operator to | ||
| * **$exponent**: The exponent used ont he number | ||
| - **$number**: The number to apply the exponent operator to | ||
| - **$exponent**: The exponent used ont he number | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| @use "@littlemissrobot/sass-functions/lib/math" as _math; | ||
@@ -605,5 +641,23 @@ _math.pow(2, 8); // 256 | ||
| #### randomize($min, $max) | ||
| Generate a random number between a minimum and maximum value. | ||
| Parameters: | ||
| - **$min**: The minimum number to randomize a number between | ||
| - **$max**: The maximum number to randomize a number between | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/lib/math" as _math; | ||
| _math.randomize(0, 10); // 4 | ||
| _math.randomize(0, 10); // 5 | ||
| _math.randomize(2, 8); // 6 | ||
| _math.randomize(2, 8); // 7 | ||
| ``` | ||
| ### Number | ||
| These functions are namespace with **number_**: | ||
| These functions are namespace with **number\_**: | ||
@@ -613,3 +667,3 @@ ```scss | ||
| _functions.number_strip(16px); | ||
| _functions.number_strip-unit(16px); | ||
| ``` | ||
@@ -620,8 +674,8 @@ | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.strip(16px); | ||
| _number.strip-unit(16px); | ||
| ``` | ||
| #### is-int($value) | ||
| #### is-integer($value) | ||
@@ -632,67 +686,103 @@ Check if a number is of type integer (no decimals). | ||
| * **$value**: The value to check | ||
| - **$value**: The value to check | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.is-int("sass-functions"); // false | ||
| _number.is-int(20); // true | ||
| _number.is-int(20.5); // false | ||
| _number.is-integer("sass-functions"); // false | ||
| _number.is-integer(20); // true | ||
| _number.is-integer(20.5); // false | ||
| ``` | ||
| #### randomize($min, $max) | ||
| #### strip-unit($value) | ||
| Generate a random number between a minimum and maximum value. | ||
| Removes the unit from a value. | ||
| Parameters: | ||
| * **$min**: The minimum number to randomize a number between | ||
| * **$max**: The maximum number to randomize a number between | ||
| - **$value**: The number to remove the unit from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.randomize(0, 10); // 4 | ||
| _number.is-int(0, 10); // 5 | ||
| _number.is-int(2, 8); // 6 | ||
| _number.is-int(2, 8); // 7 | ||
| _number.strip-unit(10px); // 10 | ||
| _number.strip-unit(7rem); // 7 | ||
| ``` | ||
| #### strip($value) | ||
| #### is-number($value) | ||
| Removes the unit from a value. | ||
| Checks whether or not the passed value is a number. Very similar to is-integer, | ||
| but this value can have decimals. | ||
| Parameters: | ||
| * **$value**: The number to remove the unit from | ||
| - **$value**: The number to validate | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.strip(10px); // 10 | ||
| _number.strip(7rem); // 7 | ||
| _number.is-number(10px); // true | ||
| _number.is-number(7rem); // true | ||
| _number.is-number(2.5px); // true | ||
| _number.is-number("sass-functions"); // false | ||
| _number.is-number(center); // false | ||
| ``` | ||
| #### valid($value) | ||
| #### px-em($value, $base) | ||
| Checks whether or not the passed value is a number. Very similar to is-int, but | ||
| this value can have decimals. | ||
| Converts a pixel value to em. | ||
| Parameters: | ||
| * **$value**: The number to validate | ||
| - **$value**: The value to convert | ||
| - **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.valid(10px); // true | ||
| _number.valid(7rem); // true | ||
| _number.valid(2.5px); // true | ||
| _number.valid("sass-functions"); // false | ||
| _number.valid(center); // false | ||
| _number.px-em(16px); // 1em | ||
| _number.px-em(10px, 16px); // 0.625em | ||
| _number.px-em(32px); // 2em | ||
| _number.px-em(20px, 10px); // 2em | ||
| ``` | ||
| #### px-rem($value, $base) | ||
| Converts a pixel value to rem. | ||
| Parameters: | ||
| - **$value**: The value to convert | ||
| - **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.px-rem(16px); // 1rem | ||
| _number.px-rem(10px, 16px); // 0.625rem | ||
| _number.px-rem(32px); // 2rem | ||
| _number.px-rem(20px, 10px); // 2rem | ||
| ``` | ||
| #### rem-px($value, $base) | ||
| Converts a rem value to px. | ||
| Parameters: | ||
| - **$value**: The value to convert | ||
| - **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/lib/number" as _number; | ||
| _number.rem-px(1rem); // 16px | ||
| _number.rem-px(2rem); // 32px | ||
| _number.rem-px(1rem, 10px); // 10px | ||
| _number.rem-px(2rem, 10px); // 20px | ||
| ``` | ||
| ### String | ||
| These functions are namespace with **string_**: | ||
| These functions are namespace with **string\_**: | ||
@@ -708,3 +798,3 @@ ```scss | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
@@ -721,6 +811,6 @@ _string.includes("Functions", "F"); | ||
| * **$value**: The number to escape | ||
| - **$value**: The number to escape | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
@@ -737,7 +827,7 @@ _string.escape(100%); // 100\% | ||
| * **$string**: The string to search | ||
| * **$characters**: The characters to search for | ||
| - **$string**: The string to search | ||
| - **$characters**: The characters to search for | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
@@ -754,8 +844,8 @@ _string.escape(100%); // 100\% | ||
| * **$string**: The string containing the characters to replace | ||
| * **$search**: The characters to search for | ||
| * **$replace**: The characters to replace the searched with | ||
| - **$string**: The string containing the characters to replace | ||
| - **$search**: The characters to search for | ||
| - **$replace**: The characters to replace the searched with | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
@@ -771,7 +861,7 @@ _string.replace("sass-functions", "sass", "dart-sass"); // dart-sass-functions | ||
| * **$string**: The string to split | ||
| * **$separator**: The character to split the string at | ||
| - **$string**: The string to split | ||
| - **$separator**: The character to split the string at | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
@@ -787,98 +877,8 @@ _string.split("sass-functions", "-"); // (sass, functions) | ||
| * **$value**: The value to convert to | ||
| - **$value**: The value to convert to | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| @use "@littlemissrobot/sass-functions/lib/string" as _string; | ||
| _string.to(10px); // "10px" | ||
| ``` | ||
| ### Px | ||
| These functions are namespace with **px_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _functions; | ||
| _functions.px_rem(16px); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/px" as _px; | ||
| _px.rem(16px); | ||
| ``` | ||
| #### em($value, $base) | ||
| Converts a pixel value to em. | ||
| Parameters: | ||
| * **$value**: The value to convert | ||
| * **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _px; | ||
| _px.em(16px); // 1em | ||
| _px.em(10px, 16px); // 0.625em | ||
| _px.em(32px); // 2em | ||
| _px.em(20px, 10px); // 2em | ||
| ``` | ||
| #### rem($value, $base) | ||
| Converts a pixel value to rem. | ||
| Parameters: | ||
| * **$value**: The value to convert | ||
| * **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _px; | ||
| _px.rem(16px); // 1rem | ||
| _px.rem(10px, 16px); // 0.625rem | ||
| _px.rem(32px); // 2rem | ||
| _px.rem(20px, 10px); // 2rem | ||
| ``` | ||
| ### Rem | ||
| These functions are namespace with **rem_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _functions; | ||
| _functions.rem_px(1rem); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/rem" as _rem; | ||
| _rem.px(1rem); | ||
| ``` | ||
| #### px($value, $base) | ||
| Converts a rem value to px. | ||
| Parameters: | ||
| * **$value**: The value to convert | ||
| * **$base** (optional): The base font-size on the body, by default is 16. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _rem; | ||
| _rem.px(1rem); // 16px | ||
| _rem.px(2rem); // 32px | ||
| _rem.px(1rem, 10px); // 10px | ||
| _rem.px(2rem, 10px); // 20px | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-60%
4
- Number of package files
- increased by2.5%
41
Worsened metrics
- Total package byte prevSize
- decreased by-33.82%
37406
- Number of medium supply chain risk alerts
- increased by100%
2
Dependency changes
+ Addedanymatch@3.1.3(transitive)
+ Addedbinary-extensions@2.3.0(transitive)
+ Addedchokidar@3.6.0(transitive)
+ Addedfsevents@2.3.3(transitive)
+ Addedglob-parent@5.1.2(transitive)
+ Addedis-binary-path@2.1.0(transitive)
+ Addednormalize-path@3.0.0(transitive)
+ Addedreaddirp@3.6.0(transitive)
+ Addedsass@1.32.2(transitive)
- Removed@parcel/watcher@2.5.0(transitive)
- Removed@parcel/watcher-android-arm64@2.5.0(transitive)
- Removed@parcel/watcher-darwin-arm64@2.5.0(transitive)
- Removed@parcel/watcher-darwin-x64@2.5.0(transitive)
- Removed@parcel/watcher-freebsd-x64@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm-musl@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm64-musl@2.5.0(transitive)
- Removed@parcel/watcher-linux-x64-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-x64-musl@2.5.0(transitive)
- Removed@parcel/watcher-win32-arm64@2.5.0(transitive)
- Removed@parcel/watcher-win32-ia32@2.5.0(transitive)
- Removed@parcel/watcher-win32-x64@2.5.0(transitive)
- Removedchokidar@4.0.1(transitive)
- Removeddetect-libc@1.0.3(transitive)
- Removedimmutable@5.0.2(transitive)
- Removedmicromatch@4.0.8(transitive)
- Removednode-addon-api@7.1.1(transitive)
- Removedreaddirp@4.0.2(transitive)
- Removedsass@1.80.7(transitive)
- Removedsource-map-js@1.2.1(transitive)
Updatedsass@1.32.2