feat: use native clamp() function

This commit also introduces Dart Sass to FluidMS.

By updating to Dart Sass, we can now use the native Sass `math.pow`
function.

BREAKING CHANGE: FluidMS now uses Dart Sass, which requires the app
using FluidMS to also use Dart Sass.

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.nvmrc

@@ -1 +1 @@
-10
+18

README.md

@@ -2,6 +2,10 @@
 
 FluidMS offers a font-size system that enables you to use [Modular Scale](https://www.modularscale.com/) in combination with the [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) technique. It also ensures that all your typography always sits on a baseline grid which size you can define.
 
+## Requirements
+
+FluidMS is built on [Dart Sass](https://sass-lang.com/dart-sass).
+
 ## Getting Started
 
 ### Installing
@@ -17,7 +21,7 @@ Next, you need to import the Sass files into your project:
 ```scss
 // Your `main.scss` file.
 
-@import "<path-to-fluidms-node-package>/src/fluidms.scss";
+@use "<path-to-fluidms-node-package>/src/fluidms.scss";
 ```
 
 If you are following an [ITCSS](https://csswizardry.com/2018/11/itcss-and-skillshare/) approach in your project, you might want to import the individual partials of FluidMS instead:
@@ -26,19 +30,19 @@ If you are following an [ITCSS](https://csswizardry.com/2018/11/itcss-and-skills
 // Your `main.scss` file.
 
 // Settings
-@import "<path-to-fluidms-node-package>/src/settings/settings.config";
+@use "<path-to-fluidms-node-package>/src/settings/settings.config";
 
 // Tools
-@import "<path-to-fluidms-node-package>/src/tools/tools.utils";
-@import "<path-to-fluidms-node-package>/src/tools/tools.ms";
-@import "<path-to-fluidms-node-package>/src/tools/tools.font-size";
-@import "<path-to-fluidms-node-package>/src/tools/tools.line-height";
+@use "<path-to-fluidms-node-package>/src/tools/tools.utils";
+@use "<path-to-fluidms-node-package>/src/tools/tools.ms";
+@use "<path-to-fluidms-node-package>/src/tools/tools.font-size";
+@use "<path-to-fluidms-node-package>/src/tools/tools.line-height";
 
 // Generic
-@import "<path-to-fluidms-node-package>/src/generic/generic.ms-custom-properties";
+@use "<path-to-fluidms-node-package>/src/generic/generic.ms-custom-properties";
 
 // Elements
-@import "<path-to-fluidms-node-package>/src/elements/elements.page";
+@use "<path-to-fluidms-node-package>/src/elements/elements.page";
 
 // Objects
 ...
@@ -50,7 +54,7 @@ If you are following an [ITCSS](https://csswizardry.com/2018/11/itcss-and-skills
 ...
 ```
 
-### Using
+### Usage
 
 To use FluidMS, you only need to apply the `fluidms-font-size()` mixin to the elements you want to assign font-sizes to:
 
@@ -177,34 +181,34 @@ FluidMS comes with predefined configuration settings that you can fit to your ne
 
 ### Changing the baseline grid
 
-FluidMS provides a baseline grid out of the box. That means that every line-height that is automatically generated by FluidMS sits on this vertical grid. You can change the size of that grid by altering the `$FLUIDMS-GLOBAL-BASELINE` variable:
+FluidMS provides a baseline grid out of the box. That means that every line-height that is automatically generated by FluidMS sits on this vertical grid. You can change the size of that grid by altering the `$GLOBAL-BASELINE` variable:
 
 ```scss
-$FLUIDMS-GLOBAL-BASELINE: 0.25rem !default;
+$GLOBAL-BASELINE: 0.25rem !default;
 ```
 
-`$FLUIDMS-GLOBAL-BASELINE` needs to be defined with a `rem` unit. It has been proven to be a good idea to define a value between `0.1rem` – `0.333rem`.
+`$GLOBAL-BASELINE` needs to be defined with a `rem` unit. It has been proven to be a good idea to define a value between `0.1rem` – `0.333rem`.
 
 If your design doesn’t require a global baseline grid, you can also disable it:
 
 ```scss
-$FLUIDMS-GLOBAL-BASELINE: false !default;
+$GLOBAL-BASELINE: false !default;
 ```
 
 ### Changing the global line-height
 
 You can define an ideal line-height that is taken into account when calculating the actual line-height. The value you define here is more just a rough direction of what the resulting line-height will be.
 
 ```scss
-$FLUIDMS-GLOBAL-LINE-HEIGHT: 1.5 !default;
+$GLOBAL-LINE-HEIGHT: 1.5 !default;
 ```
 
 ### Changing the global line-height ratio
 
 The bigger font-sizes get, the lesser the line-height needs to be in relation to its font-size. Hence, we provide an option to decrease the line-height in proportion to the font-size, the bigger the font-size gets.
 
 ```scss
-$FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
+$GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
 ```
 
 Don’t get crazy with this variable’s value! Only nudge the ratio slightly and always test all the possible font-sizes with multiline text.
@@ -215,21 +219,21 @@ With Fluid Typography, you basically define a viewport range in which all the fo
 
 #### Defining the viewport range
 
-You can define the range in which the typography is fluid with the `min-viewport` and `max-viewport` entries in the `$FLUIDMS-CONFIG` Sass map:
+You can define the range in which the typography is fluid with the `min-viewport` and `max-viewport` entries in the `$CONFIG` Sass map:
 
 ```scss
-$FLUIDMS-CONFIG: (
+$CONFIG: (
     min-viewport: 480px,
     max-viewport: 1280px,
 ) !default;
 ```
 
 #### Defining the base font-size
 
-This means that on every viewport that’s between `480px` and `1280px` wide, the typography will be fluid. How big the font-size is below and above this range can be defined with the `min-font-size` and `max-font-size` entries in `$FLUIDMS-CONFIG`:
+This means that on every viewport that’s between `480px` and `1280px` wide, the typography will be fluid. How big the font-size is below and above this range can be defined with the `min-font-size` and `max-font-size` entries in `$CONFIG`:
 
 ```scss
-$FLUIDMS-CONFIG: (
+$CONFIG: (
     min-font-size: 16px,
     max-font-size: 24px,
     min-viewport: 480px,
@@ -247,12 +251,12 @@ Below a viewport of `480px`, the font-size will be `16px` and not smaller. Above
 }
 ```
 
-then the minimum and maximum font-size should of course be bigger. How much bigger it is can be defined via the `ratio` entry in the `$FLUIDMS-CONFIG` Sass map:
+then the minimum and maximum font-size should of course be bigger. How much bigger it is can be defined via the `ratio` entry in the `$CONFIG` Sass map:
 
 #### Defining a font-size ratio
 
 ```scss
-$FLUIDMS-CONFIG: (
+$CONFIG: (
     min-font-size: 16px,
     max-font-size: 24px,
     min-viewport: 480px,
@@ -270,7 +274,7 @@ If we use the mixin with `$font-size: ms(2)`, this font-size will be again 1.1x
 What seems like a good ratio on small screens might not be suited on larger screens as the different font-sizes are too similar to each other related to the viewport size. In this case you can optionally change the ratio for different breakpoints:
 
 ```scss
-$FLUIDMS-CONFIG: (
+$CONFIG: (
     min-font-size: 16px,
     max-font-size: 24px,
     min-viewport: 480px,
@@ -286,10 +290,10 @@ Our default ratio is still `1.1`, but above screens of `1024px`, our ratio is in
 
 #### Defining a set of scales
 
-In order to even be able to use different font-sizes, we need to define a set of different font-size entities. For that, we add a `scales` list to the `$FLUIDMS-CONFIG` map.
+In order to even be able to use different font-sizes, we need to define a set of different font-size entities. For that, we add a `scales` list to the `$CONFIG` map.
 
 ```scss
-$FLUIDMS-CONFIG: (
+$CONFIG: (
     min-font-size: 16px,
     max-font-size: 24px,
     min-viewport: 480px,
@@ -317,4 +321,4 @@ Positive and negative integers are valid here. The numbers we add here basically
 
 ## Browser Support
 
-As FluidMS uses [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), the [browser support](https://caniuse.com/#feat=css-variables) is limited accordingly. A non-supporting browser will simply ignore the defined font-sizes and falls back to anything that is defined before the mixin call (ultimately to the browser default styles).
+As FluidMS uses the [`clamp()` math function](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp), the [browser support](https://caniuse.com/?search=clamp) is limited accordingly. A non-supporting browser will simply ignore the fluid base font-size and will not show any fluid typography.