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

Fix grid-space sass function using calculated vw value

Browse Source
This commit is contained in:
Lucas Bigot
2024-03-26 18:29:48 -04:00
parent 45d8be5525
commit bc3fd3a492
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,16 +109,16 @@ $context: 'frontend' !default;
// //
// ```scss // ```scss
// .c-box { // .c-box {
// width: grid-space(math.div(6, 12)); // width: grid-space(6/12);
// margin-left: grid-space(math.div(1, 12), 1); // margin-left: grid-space(1/12, 1);
// } // }
// ``` // ```
// //
// @param {number} $number - The percentage number // @param {number} $percentage - The percentage spacer
// @param {number} $inset - The grid gutter inset // @param {number} $inset - The grid gutter inset
// @return {function<number>} // @return {function<number>}
@function grid-space($number, $inset: 0) { @function grid-space($percentage, $inset: 0) {
@return calc(#{$number} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$number}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px)); @return calc(#{$percentage} * (#{vw(100)} - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
} }
// Returns calculation of a percentage of the viewport small height. // Returns calculation of a percentage of the viewport small height.