The basic features of this library can be found on npm, or in our repository on github. Examples of use are available on codepen and stackblitz. Here we will take a closer look at the features provided by the library, their use cases, and problems you may encounter when using the above tool.
If you have any questions about this library or suggestions on how it can be improved, feel free to contact me at [email protected].
@function ea-unit($value) {
@return math.div($value + 0px, 1px);
}
This function is used as an auxiliary function for all other library functions. Its task is to remove “px”. This is necessary so that the developer can pass not only “pure” numbers, but also values with “px” and sass variables as function arguments. For example, breakpoint variables, which are often stored with pixels.
Unfortunately, sass does not have a built-in function to remove units, like less (unit function). Nevertheless, a solution has been found. Initially, the function appends “0px”. This is necessary so that regardless of the value passed, “dirty” or “clean”, we get a number with pixels. Then, by dividing by “1px”, the very pixels are removed.
@debug ea-unit(16px); // 16
@debug ea-unit(16); // 16
@function ea-rem($size, $base-size: $ea-base-size) {
@return math.div(ea-unit($size), ea-unit($base-size)) + 0rem;
}
The ea-rem function translates the passed value into rems. This is done by dividing by the base size ($base-size variable). This base size, by default, is equal to the $ea-base-size variable, which in turn is equal to 16px.
It is important to realize that the function has no idea what your html font size is. Therefore, if it is not 16px, you should override the $ea-base-size variable before calling the function, or pass the html font size as the second argument.
@debug ea-unit(16); // 1rem
@debug ea-unit(16, 16); // 1rem