brf/client/public/shared/styles/_units.scss
2025-11-24 17:09:09 +01:00

93 lines
2.0 KiB
SCSS

@use 'sass:list';
@use 'sass:math';
$base-font-size: 16px !default;
@function strip-unit($num) {
@return math.div($num, ($num * 0 + 1));
}
@function convert-to-em($value, $base: $base-font-size) {
$value: math.div(strip-unit($value), strip-unit($base)) + 0em;
@if ($value == 0em) {
$value: 0;
}
@return $value;
}
@function convert-to-rem($value, $base: $base-font-size) {
$value: math.div(strip-unit($value), strip-unit($base)) + 0rem;
@if ($value == 0rem) {
$value: 0;
}
@return $value;
}
@function convert-to-px($value, $base: $base-font-size) {
$value: strip-unit($value) * strip-unit($base) + 0px;
@if ($value == 0px) {
$value: 0;
}
@return $value;
}
@function px($values, $base: $base-font-size) {
$max: list.length($values);
$px-values: ();
@for $i from 1 through $max {
$value: list.nth($values, $i);
@if math.unit($value) != 'px' {
$px-values: list.append($px-values, convert-to-px($value, $base));
} @else {
$px-values: list.append($px-values, $value);
}
}
@if $max == 1 {
$px-values: list.nth($px-values, 1);
}
@return $px-values;
}
@function rem($values, $base: $base-font-size) {
$max: list.length($values);
$rem-values: ();
@for $i from 1 through $max {
$value: list.nth($values, $i);
@if math.unit($value) != 'rem' and math.unit($value) != 'em' {
$rem-values: list.append($rem-values, convert-to-rem($value, $base));
} @else {
$rem-values: list.append($rem-values, $value);
}
}
@if $max == 1 {
$rem-values: list.nth($rem-values, 1);
}
@return $rem-values;
}
@function em($values, $base: $base-font-size) {
$max: list.length($values);
$em-values: ();
@for $i from 1 through $max {
$value: list.nth($values, $i);
@if math.unit($value) != 'rem' and math.unit($value) != 'em' {
$em-values: list.append($em-values, convert-to-em($value, $base));
} @else {
$em-values: list.append($em-values, $value);
}
}
@if $max == 1 {
$em-values: list.nth($em-values, 1);
}
@return $em-values;
}