Last active
June 11, 2021 04:21
-
-
Save benstockdesign/99a55c5046d9571fdc49f4878b0d02f3 to your computer and use it in GitHub Desktop.
Mixed-Unit Division Fun
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@use "sass:meta"; | |
@use "sass:list"; | |
@use "sass:string"; | |
@use "sass:map"; | |
@use "sass:color"; | |
@use "sass:math"; | |
@use "sass:selector"; | |
@function div-shim($n, $d) { @return $n / $d; } | |
$_div-function: if( | |
map.has-key(meta.module-functions("math"), "div"), | |
meta.get-function("div", false, "math"), | |
meta.get-function("div-shim") | |
); | |
@function divide($dividend, $divisor) { | |
@return meta.call($_div-function, $dividend, $divisor); | |
} | |
@mixin quotient($n, $d, $prefix: null, $suffix: null, $comment: null, $doc-block: null) { | |
$result: divide($n, $d); | |
@if $doc-block { | |
/** | |
* #{$doc-block} | |
*/ | |
} @else if $comment { | |
/* #{$comment} */ | |
} | |
@if $prefix { | |
$paren-lo: string.index($prefix, "("); | |
$paren-hi: string.index($prefix, ")"); | |
@if $paren-lo and $paren-hi { | |
$split-index: string.index($prefix, "|"); | |
$verb: string.slice($prefix, $paren-lo + 1, $paren-hi - 1); | |
@if $result == 1 { | |
$verb: string.slice($prefix, $paren-lo + 1, $split-index - 1); | |
} @else { | |
$verb: string.slice($prefix, $split-index + 1, $paren-hi - 1); | |
} | |
$head: string.slice($prefix, 1, $paren-lo - 1); | |
$tail: string.slice($prefix, $paren-hi + 1); | |
$prefix: $head + $verb + $tail; | |
} | |
} @else { | |
$prefix: "Result"; | |
} | |
@if $suffix { | |
$paren-lo: string.index($suffix, "("); | |
$paren-hi: string.index($suffix, ")"); | |
@if $paren-lo and $paren-hi { | |
$suffix-suffix: ""; | |
@if $result != 1 { | |
$suffix-suffix: string.slice($suffix, $paren-lo + 1, $paren-hi - 1); | |
} | |
$head: string.slice($suffix, 1, $paren-lo - 1); | |
$tail: string.slice($suffix, $paren-hi + 1); | |
$suffix: $head + $suffix-suffix + $tail; | |
} | |
} | |
#{$prefix}: #{divide($n, $d)} #{$suffix} | |
} | |
.test { | |
/** | |
* Length - Px Per Unit | |
*/ | |
@include quotient(1pt, 1px, $prefix: px/pt, $comment: "Pixels per point (96 dpi)"); | |
@include quotient(1pc, 1px, $prefix: px/pc, $comment: "Pixels per pica"); | |
@include quotient(1in, 1px, $prefix: px/in, $comment: "Pixels per inch"); | |
@include quotient(1cm, 1px, $prefix: px/cm, $comment: "Pixels per centimeter"); | |
@include quotient(1mm, 1px, $prefix: px/mm, $comment: "Pixels per millimeter"); | |
@include quotient(1q, 1px, $prefix: px/q, $comment: "Pixels per quarter-millimeter"); | |
/** | |
* Length - Units Per Px | |
*/ | |
@include quotient(1px, 1pt, "Points", $suffix: "(96 dpi)"); | |
@include quotient(1px, 1pc, "Picas"); | |
@include quotient(1px, 1in, "Inches"); | |
@include quotient(1px, 1cm, "Centimeters"); | |
@include quotient(1px, 1mm, "Millimeters"); | |
@include quotient(1px, 1q, "Quarter-Millimeters"); | |
/** | |
* Angle - Deg Per Unit | |
*/ | |
@include quotient(1deg, 1deg, $prefix: "deg", $doc-block: "Degrees per degree"); | |
@include quotient(1rad, 1deg, $prefix: "rad", $doc-block: "Degrees per radian"); | |
@include quotient(1grad, 1deg, $prefix: "grad", $doc-block: "Degrees per gradian"); | |
@include quotient(1turn, 1deg, $prefix: "turn", $doc-block: "Degrees per turn"); | |
/** | |
* Angle - Units Per Deg | |
*/ | |
@include quotient(1deg, 1deg, $prefix: "There (is|are)", $suffix: "degree(s) per degree."); | |
@include quotient(1deg, 1rad, $suffix: "rad/deg"); | |
@include quotient(1deg, 1grad, $suffix: "grad/deg"); | |
@include quotient(1deg, 1turn, $suffix: "turn/deg"); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.test { | |
/** | |
* Length - Px Per Unit | |
*/ | |
/* Pixels per point (96 dpi) */ | |
px/pt: 1.3333333333; | |
/* Pixels per pica */ | |
px/pc: 16; | |
/* Pixels per inch */ | |
px/in: 96; | |
/* Pixels per centimeter */ | |
px/cm: 37.7952755906; | |
/* Pixels per millimeter */ | |
px/mm: 3.7795275591; | |
/* Pixels per quarter-millimeter */ | |
px/q: 0.9448818898; | |
/** | |
* Length - Units Per Px | |
*/ | |
Points: 0.75 96 dpi; | |
Picas: 0.0625; | |
Inches: 0.0104166667; | |
Centimeters: 0.0264583333; | |
Millimeters: 0.2645833333; | |
Quarter-Millimeters: 1.0583333333; | |
/** | |
* Angle - Deg Per Unit | |
*/ | |
/** | |
* Degrees per degree | |
*/ | |
deg: 1; | |
/** | |
* Degrees per radian | |
*/ | |
rad: 57.2957795131; | |
/** | |
* Degrees per gradian | |
*/ | |
grad: 0.9; | |
/** | |
* Degrees per turn | |
*/ | |
turn: 360; | |
/** | |
* Angle - Units Per Deg | |
*/ | |
There is: 1 degree per degree.; | |
Result: 0.0174532925 rad/deg; | |
Result: 1.1111111111 grad/deg; | |
Result: 0.0027777778 turn/deg; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "dart-sass/1.32.12", | |
"extensions": {}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment