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

Merge pull request #146 from locomotivemtl/feature/css-math

Browse Source 
Replace fractions with math.div in scss files
This commit is contained in:
Deven Caron
2023-05-12 10:36:33 -04:00
committed by GitHub
parent 7517be0e76 d6b5784cdd
commit 05a00c4258
5 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/objects/_icons.scss
View File

@@ -32,7 +32,7 @@
vertical-align: middle; vertical-align: middle;
svg { svg {
--icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio)))); --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));
display: block; display: block;
width: var(--icon-width); width: var(--icon-width);

2
assets/styles/tools/_family.scss
View File

@@ -147,7 +147,7 @@
// @param {number} $num - id of the child // @param {number} $num - id of the child
@mixin middle($num) { @mixin middle($num) {
&:nth-child(#{round($num / 2)}) { &:nth-child(#{round(math.div($num, 2))}) {
@content; @content;
} }
} }

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

@@ -8,7 +8,7 @@
// @return {number} // @return {number}
@function strip-units($number) { @function strip-units($number) {
@return $number / ($number * 0 + 1); @return math.div($number, ($number * 0 + 1));
} }
// Returns the square root of the given number. // Returns the square root of the given number.
@@ -21,7 +21,7 @@
$value: $x; $value: $x;
@for $i from 1 through 10 { @for $i from 1 through 10 {
$value: $x - ($x * $x - abs($number)) / (2 * $x); $value: $x - math.div(($x * $x - abs($number)), (2 * $x));
$x: $value; $x: $value;
} }
@@ -43,7 +43,7 @@
} }
} @else if $exp < 0 { } @else if $exp < 0 {
@for $i from 1 through -$exp { @for $i from 1 through -$exp {
$value: $value / $number; $value: math.div($value, $number);
} }
} }
@@ -88,7 +88,7 @@
// If the angle has `deg` as unit, convert to radians. // If the angle has `deg` as unit, convert to radians.
@if ($unit == deg) { @if ($unit == deg) {
@return $angle / 180 * pi(); @return math.div($angle, 180) * pi();
} }
@return $angle; @return $angle;
@@ -104,7 +104,7 @@
$angle: rad($angle); $angle: rad($angle);
@for $i from 0 through 10 { @for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));
} }
@return $sin; @return $sin;
@@ -120,7 +120,7 @@
$angle: rad($angle); $angle: rad($angle);
@for $i from 0 through 10 { @for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));
} }
@return $cos; @return $cos;
@@ -132,5 +132,5 @@
// @return {number} // @return {number}
@function tan($angle) { @function tan($angle) {
@return sin($angle) / cos($angle); @return math.div(sin($angle), cos($angle));
} }

2
assets/styles/tools/_mixins.scss
View File

@@ -51,7 +51,7 @@
font-size: rem($font-size) $important; font-size: rem($font-size) $important;
@if ($line-height == "auto") { @if ($line-height == "auto") {
line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important; line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;
} }
@else { @else {
@if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") { @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {

6
assets/styles/tools/_widths.scss
View File

@@ -58,7 +58,7 @@ $breakpoint-delimiter: \@ !default;
@for $numerator from 1 through $denominator { @for $numerator from 1 through $denominator {
// Build a class in the format `.u-3/4[@<breakpoint>]`. // Build a class in the format `.u-3/4[@<breakpoint>]`.
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} { .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
width: ($numerator / $denominator) * 100% $important; width: math.div($numerator, $denominator) * 100% $important;
} }
@if ($widths-offsets == true) { @if ($widths-offsets == true) {
@@ -66,13 +66,13 @@ $breakpoint-delimiter: \@ !default;
.u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} { .u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
position: relative $important; position: relative $important;
right: auto $important; right: auto $important;
left: ($numerator / $denominator) * 100% $important; left: math.div($numerator, $denominator) * 100% $important;
} }
// Build a class in the format `.u-pull-5/6[@<breakpoint>]`. // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
.u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} { .u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
position: relative $important; position: relative $important;
right: ($numerator / $denominator) * 100% $important; right: math.div($numerator, $denominator) * 100% $important;
left: auto $important; left: auto $important;
} }
} }