Skip to content

Instantly share code, notes, and snippets.

@benstockdesign
Last active June 11, 2021 04:21
Show Gist options
  • Save benstockdesign/99a55c5046d9571fdc49f4878b0d02f3 to your computer and use it in GitHub Desktop.
Save benstockdesign/99a55c5046d9571fdc49f4878b0d02f3 to your computer and use it in GitHub Desktop.
Mixed-Unit Division Fun
@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");
}
.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;
}
{
"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