ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Update maths comments / Add pixel value function

Browse Source
This commit is contained in:
Lucas Vallenet
2022-05-25 16:02:15 +02:00
parent d7de1b2566
commit cb27975087
2 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/styles/tools/_functions.scss
View File

@@ -2,6 +2,15 @@
// Tools / Functions
// ==========================================================================
// Check if the given value is a number in pixel
//
// @param {Number} $number - The value to check
// @return {Boolean}
@function is-pixel-number($number) {
@return type-of($number) == number and unit($number) == "px";
}
// Converts the given pixel value to its EM quivalent.
//
// @param {Number} $size - The pixel value to convert.
@@ -9,20 +18,12 @@
// @return {Number} Scalable pixel value in EMs.
@function em($size, $base: $font-size) {
@if (type-of($size) == number) {
@if (unit($size) != "px") {
@error "`#{$size}` needs to be a pixel value.";
}
} @else {
@error "`#{$size}` needs to be a number.";
@if not is-pixel-number($size) {
@error "`#{$size}` needs to be a number in pixel.";
}
@if (type-of($base) == number) {
@if (unit($base) != "px") {
@error "`#{$base}` needs to be a pixel value.";
}
} @else {
@error "`#{$base}` needs to be a number.";
@if not is-pixel-number($base) {
@error "`#{$base}` needs to be a number in pixel.";
}
@return ($size / $base) * 1em;
@@ -35,20 +36,13 @@
// @return {Number} Scalable pixel value in REMs.
@function rem($size, $base: $font-size) {
@if (type-of($size) == number) {
@if (unit($size) != "px") {
@error "`#{$size}` needs to be a pixel value.";
}
} @else {
@error "`#{$size}` needs to be a number.";
@if not is-pixel-number($size) {
@error "`#{$size}` needs to be a number in pixel.";
}
@if (type-of($base) == number) {
@if (unit($base) != "px") {
@error "`#{$base}` needs to be a pixel value.";
}
} @else {
@error "`#{$base}` needs to be a number.";
@if not is-pixel-number($base) {
@error "`#{$base}` needs to be a number in pixel.";
}
@return ($size / $base) * 1rem;

24
assets/styles/tools/_maths.scss
View File

@@ -11,10 +11,10 @@
@return $number / ($number * 0 + 1);
}
// Square root function
// Returns the square root of the given number.
//
// @param {string} $number The number
// @return {string} The sqrt number
// @param {number} $number The number to calculate.
// @return {number}
@function sqrt($number) {
$x: 1;
@@ -75,21 +75,23 @@
@return 3.14159265359;
}
// Convert deg to rad
// Converts the number in degrees to the radian equivalent .
//
// @param {string} $angle The angle to convert
// @return {number} The unitless angle converted to rad
// @param {number} $angle The angular value to calculate.
// @return {number} If $angle has the `deg` unit,
// the radian equivalent is returned.
// Otherwise, the unitless value of $angle is returned.
@function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
$angle: strip-units($angle);
// If the angle has 'deg' as unit, convert to radians.
@if $unit == deg {
$unitless: $unitless / 180 * pi();
// If the angle has `deg` as unit, convert to radians.
@if ($unit == deg) {
@return $angle / 180 * pi();
}
@return $unitless;
@return $angle;
}
// Returns the sine of the given number.