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 0.1.3 to 1.0.0
| { | ||
| "name": "@littlemissrobot/sass-functions", | ||
| "version": "0.1.3", | ||
| "version": "1.0.0", | ||
| "description": "Little Miss Robot sass functions library that helps execute reusable and complex tasks ", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "start": "webpack-dev-server --inline --config .webpack/webpack.dev.js", | ||
| "build": "webpack -p --config .webpack/webpack.prod.js", | ||
| "todo": "leasot -x --reporter markdown 'src/**/*.html' 'src/**/*.scss' > TODO.md", | ||
| "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" | ||
@@ -24,25 +23,24 @@ }, | ||
| "files": [ | ||
| "lib" | ||
| "scss", | ||
| "_index.scss" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "devDependencies": { | ||
| "@littlemissrobot/stylelint-config": "^1.0.6", | ||
| "clean-webpack-plugin": "^3.0.0", | ||
| "copy-webpack-plugin": "^5.1.1", | ||
| "css-loader": "^3.4.2", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "leasot": "^10.0.0", | ||
| "node-sass": "^4.13.0", | ||
| "postcss-loader": "^3.0.0", | ||
| "@littlemissrobot/stylelint-config": "^1.0.15", | ||
| "browser-sync": "^2.26.7", | ||
| "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.0.0", | ||
| "sass-loader": "^8.0.2", | ||
| "style-loader": "^1.1.2", | ||
| "stylelint": "^13.0.0", | ||
| "stylelint-webpack-plugin": "^1.2.1", | ||
| "webpack": "^4.41.5", | ||
| "webpack-cli": "^3.3.10", | ||
| "webpack-dev-server": "^3.10.1", | ||
| "webpack-fix-style-only-entries": "^0.4.0", | ||
| "webpack-merge": "^4.2.2" | ||
| "postcss-scss": "^2.1.1", | ||
| "stylelint": "^13.5.0" | ||
| }, | ||
| "dependencies": { | ||
| "sass": "^1.26.8" | ||
| } | ||
| } |
795
README.md
| # Little Miss Robot - Sass functions | ||
| > This repository contains SASS functions that we, at Little Miss Robot, like to | ||
| > use to make our wonderful lives in the world of SASS easier and more | ||
| > managable. | ||
| > 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 | ||
| > wondeful. These functions are also mainly used throughout our other libraries | ||
| > to manage recurring tasks. | ||
| ## Info | ||
| This package does not contain or generate any CSS. It simply provides a couple | ||
| of `@function` statements for you to make use of. | ||
| This package contains no styling but simply provides a couple of functions that | ||
| execute a simple task. This is specifically made for SASS and cannot be used in | ||
| any other language. | ||
| ## IMPORTANT | ||
| 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. | ||
| 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. | ||
| 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. | ||
| ## Install | ||
| ```sh | ||
| # As a dependency | ||
| $ npm install @littlemissrobot/sass-functions | ||
| # As a dev-dependency | ||
| $ npm install --save-dev @littlemissrobot/sass-functions | ||
@@ -20,228 +35,798 @@ ``` | ||
| 1. Import the library from the node_modules folder. | ||
| ### Through the main entry point | ||
| 1. Import the library from the node_modules folder: | ||
| ```scss | ||
| @import "~@littlemissrobot/sass-functions/lib/main"; | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-functions" as _f; | ||
| ``` | ||
| 2. That's it! The functions that are present within this file are now available | ||
| to you! | ||
| 2. Functions are now available within the `_f` namespace: | ||
| ```scss | ||
| h1 { | ||
| margin-bottom: _f.px_rem(16px); | ||
| } | ||
| ``` | ||
| 3. That's (mind-blowingly) it! The functions are seperated with internal | ||
| namespaces, where functions related to a `map` are namespaced with | ||
| `_f.map_[FUNCTION-NAME]` or a `list` would be `_f.list_[FUNCTION-NAME]`. | ||
| ### Through the partial entry points | ||
| 1. Import the partial of the library from the node_modules folder. | ||
| ```scss | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-functions/px" as _px; | ||
| ``` | ||
| 2. Functions are now available within the `_px` namespace: | ||
| ```scss | ||
| h1 { | ||
| margin-bottom: _px.rem(16px); | ||
| } | ||
| ``` | ||
| 3. That's (mind-blowingly) it! There are a number of partials to use the | ||
| functions from: | ||
| * `"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;` | ||
| ## Functions | ||
| ### escape-chars($value) | ||
| ### List | ||
| > Escapes special characters in SASS to be used in for example, class names. It | ||
| > places backward slashes in front of the special characters to escape them. | ||
| These functions are namespace with **list_**: | ||
| Supported characters (will get extended): | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| * **%** is changed to **\%** | ||
| * **.** is changed to **\.** | ||
| _f.list_includes($list, 5); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| _list.includes($list, 5); | ||
| ``` | ||
| #### includes($list, $item) | ||
| Checks if the list contains a certain item. Returns a boolean. | ||
| Parameters: | ||
| * **$value**: the string that contain characters that needs to be escaped | ||
| * **$list**: the list to search within | ||
| * **$item**: the item to search for in the list | ||
| ```scss | ||
| escape-chars("100%"); | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| $list: (1, 2, 3, 4, 5); | ||
| _list.includes($list, 5); // true | ||
| _list.includes($list, 10); // false | ||
| ``` | ||
| ### is-number($value) | ||
| #### is-low-to-high($list) | ||
| > Checks if the passed value is a number and returns a boolean. | ||
| Checks if the numbers in the list are ordered lowest to highest. | ||
| Parameters: | ||
| * **$value**: the value that should get checked | ||
| * **$list**: the list which contains the numbers. | ||
| ```scss | ||
| is-number($value); | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| $list1: (2, 1, 3); | ||
| $list2: (1, 2, 3); | ||
| _list.is-low-to-high($list1); // false | ||
| _list.is-low-to-high($list2); // true | ||
| ``` | ||
| ### list-contains($list, $item) | ||
| #### merge-unique($lists...) | ||
| > Checks if a list contains a certain item and returns a boolean. | ||
| Merges multiple lists and removes any duplicates. | ||
| Parameters: | ||
| * **$list**: the list that contains multiple items | ||
| * **$item**: the item to look for in the list | ||
| * **$lists...**: any amount of lists to merge together | ||
| ```scss | ||
| $list: (1, 2, 3); | ||
| $item: 1; | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| list-contains($list, $item); | ||
| $list1: (1, 2, 3); | ||
| $list2: (1, 2, 3, 4, 5); | ||
| $list3: (4, 5, 6, 7, 8); | ||
| _list.merge-unique($list1, $list2, $list3); // (1, 2, 3, 4, 5, 6, 7, 8) | ||
| ``` | ||
| ### map-collect($maps...) | ||
| #### remove-duplicates($list) | ||
| > The standard map-merge function only lets you merge 2 maps together. This | ||
| > function makes use of map-merge but merges as much maps together as you want. | ||
| Loops through the list and removes duplicate values. | ||
| Parameters | ||
| Parameters: | ||
| * **$maps...**: comma seperated maps that should all get merged together. | ||
| * **$list**: the list to remove the duplicates from | ||
| ```scss | ||
| map-collect($map1, $map2, $map3); | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| $list: (1, 2, 3, 1, 3, 4, 5); | ||
| _list.remove-duplicates($list); // (1, 2, 3, 4, 5) | ||
| ``` | ||
| ### px-to-rem($value, $normalize) | ||
| #### reverse($list) | ||
| > Convert a pixel value to a rem value. Do note that we assume here that on the | ||
| > html tag you have defined that the font-size is 62.5%, to make sure that the | ||
| > 1rem is equal to 10px. If you want to overwrite this than you can simply pass | ||
| > a second parameter that indicates how much 1rem is in pixels. | ||
| Reverses the order of the values within a list. | ||
| Parameters: | ||
| * **$value**: the amount of pixels to be converted to rem | ||
| * **$normalize**: the amount of pixels that is equal to 1 rem, defalut is 10px | ||
| * **$list**: the list to reverse the order of the items. | ||
| ```scss | ||
| margin: px-to-rem(50px); | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| $list: (1, 2, 3, 4, 5); | ||
| _list.reverse($list); // (5, 4, 3, 2, 1) | ||
| ``` | ||
| ### random-number($min, $max) | ||
| #### sort-low-to-high($list) | ||
| > Generate a random number between a minimum and maximum value. This returns | ||
| > a randomised number between the range. | ||
| Sorts a list of numbers from lowest to highest. | ||
| Parameters: | ||
| * **$min**: the minimum value to generate the number between | ||
| * **$max**: the maximum value to generate the number between | ||
| * **$list**: the list to sort. | ||
| ```scss | ||
| margin: random-number(2rem, 10rem); | ||
| margin: random-number(20px, 100px); | ||
| @use "@littlemissrobot/sass-functions/list" as _list; | ||
| $list: (2, 1, 5, 3, 4); | ||
| _list.sort-low-to-high($list); // (1, 2, 3, 4, 5) | ||
| ``` | ||
| ### rem-to-px($value, $normalize) | ||
| ### Map | ||
| > Convert a rem value to a pixel value. Do note that we assume here that on the | ||
| > html tag you have defined that the font-size is 62.5%, to make sure that the | ||
| > 1rem is equal to 10px. If you want to overwrite this than you can simply pass | ||
| > a second parameter that indicates how much 1rem is in pixels. | ||
| These functions are namespace with **map_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| _f.map_includes($map, color); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| _map.includes($map, color); | ||
| ``` | ||
| #### collect($maps...) | ||
| The standard map-merge function only lets you merge 2 maps. This function makes | ||
| use of the method, but merges as many maps together as you want. | ||
| Parameters: | ||
| * **$value:** the amount of rem to be converted to pixels | ||
| * **$normalize**: the amount of pixels that is equal to 1 rem, defalut is 10px | ||
| * **$maps**: any amount of maps to merge together | ||
| ```scss | ||
| margin: rem-to-px(5rem); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $map1: ( | ||
| display: flex; | ||
| justify-content: center, | ||
| align-items: center, | ||
| ); | ||
| $map2: ( | ||
| font-size: 16px, | ||
| line-height: 24px, | ||
| ); | ||
| $map3: ( | ||
| color: white, | ||
| background-color: black, | ||
| ); | ||
| _map.sort-low-to-high($map1, $map2, $map3); | ||
| // result: ( | ||
| // display: flex; | ||
| // justify-content: center, | ||
| // align-items: center, | ||
| // font-size: 16px, | ||
| // line-height: 24px, | ||
| // color: white, | ||
| // background-color: black, | ||
| // ); | ||
| ``` | ||
| ### reverse-map($map) | ||
| #### get($map, $path) | ||
| > Reverses the order of the keys in a map | ||
| Retrieve a value from a map which can contain mulitple more maps with values. | ||
| Pass a path as a string, where each key is seperated by a space. Each key within | ||
| that string represents the keys until you reach a certain value within the map. | ||
| Parameters | ||
| Parameters: | ||
| * **$map**: the target map that should be reversed | ||
| * **$map**: The map to retrieve the value from | ||
| * **$path**: The path of keys to the value | ||
| ```scss | ||
| reverse-map($breakpoints); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $colors: ( | ||
| brand: ( | ||
| primary: black, | ||
| secondary: white | ||
| ), | ||
| typo: ( | ||
| title: ( | ||
| h1: black, | ||
| h2: red, | ||
| h3: blue | ||
| ), | ||
| text: ( | ||
| p: black, | ||
| small: ( | ||
| base: gray, | ||
| inverse: white, | ||
| ), | ||
| ) | ||
| ) | ||
| ); | ||
| _map.get($colors, "brand primary"); // black | ||
| _map.get($colors, "typo title h1"); // black | ||
| _map.get($colors, "typo text small base"); // gray | ||
| ``` | ||
| ### set-px($value) | ||
| #### get-from-list($map, $list) | ||
| > Converts any value into a pixel, only if it is supported within the function. | ||
| Generate a new map of items, based on the values within the list, which | ||
| represent the keys in the map. | ||
| Supported values (get expanded): | ||
| Parameters: | ||
| * rem to pixel | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new map from | ||
| Parameters | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| * **$value**: the value that should get converted to a pixel. | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| $list1: (viewport-7, viewport-9); | ||
| $list2: (viewport-3, viewport-9, viewport-12); | ||
| _map.get-from-list($breakpoints, $list1); | ||
| // result: ( | ||
| // viewport-7: 720px, | ||
| // viewport-9: 992px, | ||
| // ); | ||
| _map.get-from-list($breakpoints, $list2); | ||
| // result: ( | ||
| // viewport-3: 360px, | ||
| // viewport-9: 992px, | ||
| // viewport-12: 1200px, | ||
| // ); | ||
| ``` | ||
| #### get-keys-from-list($map, $list) | ||
| Generate a new list of keys from a map, based on the items within a map and a | ||
| list representing the values in that map. | ||
| Parameters: | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new list from | ||
| ```scss | ||
| reverse-map($breakpoints); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| $list1: (720px, 992px); | ||
| $list2: (360px, 992px, 1200px); | ||
| _map.get-keys-from-list($breakpoints, $list1); | ||
| // result: (viewport-7, viewport-9); | ||
| _map.get-keys-from-list($breakpoints, $list2); | ||
| // result: (viewport-3, viewport-9, viewport-12); | ||
| ``` | ||
| ### str-replace($string, $search, $replace) | ||
| #### get-values-from-list($map, $list) | ||
| > Searches a string for a certain character or group of characters and replaces | ||
| > it with the passed character(s). | ||
| Generate a new list of values from a map, based on the items within a map and a | ||
| list representing the keys in that map. | ||
| Parameters: | ||
| * **$string**: the string to search for and replace | ||
| * **$search**: the character(s) to search for in the string | ||
| * **$replace**: the character(s) to replace the searched characters with | ||
| * **$map**: The map with the keys and values | ||
| * **$list**: The list to create a new list from | ||
| ```scss | ||
| str-replace("Drupal 4 life", "Drupal", "Craft"); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| $list1: (viewport-7, viewport-9); | ||
| $list2: (viewport-3, viewport-9, viewport-12); | ||
| _map.get-values-from-list($breakpoints, $list1); | ||
| // result: (720px, 992px); | ||
| _map.get-values-from-list($breakpoints, $list2); | ||
| // result: (360px, 992px, 1200px); | ||
| ``` | ||
| ### str-split($string, $separator) | ||
| #### includes($map, $key) | ||
| > Create a list from a string by defining a character to split the string at. | ||
| Checks if a map contains a certain key. | ||
| Parameters: | ||
| * **$string**: the string to split and create a list from | ||
| * **$separator**: the character(s) to split the string at | ||
| * **$map**: The map to search | ||
| * **$key**: The item to search for | ||
| ```scss | ||
| $string: "Batman Superman Flash"; | ||
| $separator: " "; | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| str-split($string, $separator); | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| _map.includes($breakpoints, viewport-7); // true | ||
| _map.includes($breakpoints, viewport-2); // false | ||
| ``` | ||
| ### strip-unit($value) | ||
| #### is-low-to-high($map) | ||
| > Removes the unit from a value. For example: 10px becomes 10. | ||
| Checks if the numbers, as values, in the map are ordered lowest to highest. | ||
| Parameters: | ||
| * **$value**: the value that should get its units stripped | ||
| * **$map**: the map which contains the keys with its number. | ||
| ```scss | ||
| strip-unit(10px); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $map1: ( | ||
| viewport-7: 720px, | ||
| viewport-3: 360px, | ||
| viewport-9: 960px | ||
| ); | ||
| $map2: ( | ||
| viewport-3: 360px, | ||
| viewport-7: 720px, | ||
| viewport-9: 960px | ||
| ); | ||
| _map.is-low-to-high($map1); // false | ||
| _map.is-low-to-high($map2); // true | ||
| ``` | ||
| ### to-string($value) | ||
| #### reverse($map) | ||
| > Converts a value to a string | ||
| Reverses the order of the items within a map. | ||
| Parameters: | ||
| * **$value**: the value that should get converted to a string | ||
| * **$map**: the map to reverse the order of the items. | ||
| ```scss | ||
| to-string(10) | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| _map.reverse($breakpoints); | ||
| // result: ( | ||
| // viewport-12: 1200px | ||
| // viewport-9: 992px, | ||
| // viewport-7: 720px, | ||
| // viewport-4: 480px, | ||
| // viewport-3: 360px, | ||
| // ); | ||
| ``` | ||
| ### trim-map-to($map, $target) | ||
| #### trim($map, $target) | ||
| > Trims a map to a certain target key. Returns a new map that is trimmed down | ||
| > until the key is met. | ||
| Trims a map to a certain target key. Returns a new map that is trimmed down | ||
| until the key is met. | ||
| Parameters: | ||
| * **$map**: the map that needs to be trimmed | ||
| * **$target**: the target key that needs to be met | ||
| * **$map**: the map to trim | ||
| * **$target**: the target key to trim the map to. | ||
| ```scss | ||
| trim-map-to($breakpoints, "viewport-9"); | ||
| @use "@littlemissrobot/sass-functions/map" as _map; | ||
| $breakpoints: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ); | ||
| _map.trim($breakpoints, viewport-7); | ||
| // result: ( | ||
| // viewport-3: 360px, | ||
| // viewport-4: 480px, | ||
| // viewport-7: 720px | ||
| // ); | ||
| ``` | ||
| ### trim-reverse-map-to($map, $target) | ||
| ### Math | ||
| > Trims a map to a certain target key. Reverses the map to start from the top | ||
| > and goes down to the bottom. It trims the keys until the target is met. | ||
| These functions are namespace with **math_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| _f.math_pow(8, 2); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| _math.pow(8, 2); | ||
| ``` | ||
| #### Decimal($value, $amount) | ||
| Round a number's value after the comma (decimals) to a certain amount. | ||
| Parameters: | ||
| * **$map**: the map that needs to be trimmed | ||
| * **$target**: the target key that needs to be met | ||
| * **$value**: The number and its decimals to round | ||
| * **$target**: The target amount to round the decimals to | ||
| ```scss | ||
| trim-reverse-map-to($breakpoints, "viewport-9"); | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| _math.decimal(1.12345, 2); // 1.12 | ||
| _math.decimal(1.123456789, 5); // 1.12346 | ||
| ``` | ||
| #### Pow($number, $exponent) | ||
| Power function / exponent operator which accepts positive, negative (integer, | ||
| float) exponents. | ||
| Parameters: | ||
| * **$number**: The number to apply the exponent operator to | ||
| * **$exponent**: The exponent used ont he number | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/math" as _math; | ||
| _math.pow(2, 8); // 256 | ||
| _math.pow(4, 2); // 16 | ||
| ``` | ||
| ### Number | ||
| These functions are namespace with **number_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| _f.number_strip(16px); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| _number.strip(16px); | ||
| ``` | ||
| #### is-int($value) | ||
| Check if a number is of type integer (no decimals). | ||
| Parameters: | ||
| * **$value**: The value to check | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| _number.is-int("sass-functions"); // false | ||
| _number.is-int(20); // true | ||
| _number.is-int(20.5); // false | ||
| ``` | ||
| #### 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/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 | ||
| ``` | ||
| #### strip($value) | ||
| Removes the unit from a value. | ||
| Parameters: | ||
| * **$value**: The number to remove the unit from | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/number" as _number; | ||
| _number.strip(10px); // 10 | ||
| _number.strip(7rem); // 7 | ||
| ``` | ||
| #### valid($value) | ||
| Checks whether or not the passed value is a number. Very similar to is-int, but | ||
| this value can have decimals. | ||
| Parameters: | ||
| * **$value**: The number to validate | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/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 | ||
| ``` | ||
| ### String | ||
| These functions are namespace with **string_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| _f.string_includes("Functions", "F"); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| _string.includes("Functions", "F"); | ||
| ``` | ||
| #### escape($value) | ||
| Escapes a value and adds extra slashes to special characters. This can be useful | ||
| for creating a class with special characters. | ||
| Parameters: | ||
| * **$value**: The number to escape | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| _string.escape(100%); // 100\% | ||
| _string.escape(l-grid__col:12/12); // l-grid__col\:12\/12 | ||
| ``` | ||
| #### includes($string, $characters) | ||
| Check if string contains certain characters. Returns a boolean. | ||
| Parameters: | ||
| * **$string**: The string to search | ||
| * **$characters**: The characters to search for | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| _string.escape(100%); // 100\% | ||
| _string.escape(l-grid__col:12/12); // l-grid__col\:12\/12 | ||
| ``` | ||
| #### replace($string, $search, $replace) | ||
| Replace a certain part of a string by another string. | ||
| Parameters: | ||
| * **$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; | ||
| _string.replace("sass-functions", "sass", "dart-sass"); // dart-sass-functions | ||
| ``` | ||
| #### split($string, $separator) | ||
| Create a list from a string by defining a character to split the string at. | ||
| Parameters: | ||
| * **$string**: The string to split | ||
| * **$separator**: The character to split the string at | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| _string.split("sass-functions", "-"); // (sass, functions) | ||
| ``` | ||
| #### to($string, $separator) | ||
| Converts a value to a string | ||
| Parameters: | ||
| * **$value**: The value to convert to | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions/string" as _string; | ||
| _string.to(10px); // "10px" | ||
| ``` | ||
| ### Px | ||
| These functions are namespace with **px_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-functions" as _f; | ||
| _f.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 _f; | ||
| _f.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
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by223.54%
56396
- Dev dependency count
- decreased by-42.11%
11
- Number of package files
- increased by122.22%
40
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by236.84%
832
Worsened metrics
- Dependency count
- increased byInfinity%
1
Dependency changes
+ Addedsass@^1.26.8
+ Added@parcel/watcher@2.5.0(transitive)
+ Added@parcel/watcher-android-arm64@2.5.0(transitive)
+ Added@parcel/watcher-darwin-arm64@2.5.0(transitive)
+ Added@parcel/watcher-darwin-x64@2.5.0(transitive)
+ Added@parcel/watcher-freebsd-x64@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm-musl@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm64-musl@2.5.0(transitive)
+ Added@parcel/watcher-linux-x64-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-x64-musl@2.5.0(transitive)
+ Added@parcel/watcher-win32-arm64@2.5.0(transitive)
+ Added@parcel/watcher-win32-ia32@2.5.0(transitive)
+ Added@parcel/watcher-win32-x64@2.5.0(transitive)
+ Addedbraces@3.0.3(transitive)
+ Addedchokidar@4.0.1(transitive)
+ Addeddetect-libc@1.0.3(transitive)
+ Addedfill-range@7.1.1(transitive)
+ Addedimmutable@5.0.2(transitive)
+ Addedis-extglob@2.1.1(transitive)
+ Addedis-glob@4.0.3(transitive)
+ Addedis-number@7.0.0(transitive)
+ Addedmicromatch@4.0.8(transitive)
+ Addednode-addon-api@7.1.1(transitive)
+ Addedpicomatch@2.3.1(transitive)
+ Addedreaddirp@4.0.2(transitive)
+ Addedsass@1.80.7(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedto-regex-range@5.0.1(transitive)