Why does the $num / ($num * 0 + 1) strip units?

Asked Feb 28 '16 at 22:52

Active Mar 09 '16 at 19:47

Viewed 48 times

So I looked into the foundation for sites repo on git in order to get to know some advanced sass features and tripped over the strip-unit-function. Basically it somehow strips the unit (px, em, rem) from a given input and just outputs the value.

@function strip-unit($num) {
    @return $num / ($num * 0 + 1);
}

But why does this work? (5px * 0 + 1) returns 1px and (5px * 1px) returns 5px*px so how does 5px / (5px * 0 + 1) even compute? Is this some kind of hack or do I just fail to understand the logic?

Link to full repo https://github.com/zurb/foundation-sites/blob/6.2-stable/scss/util/_unit.scss

EDIT My question is not How to do it but why it works. Is it just a bug or some kind of hack does this follow any logical principle? Why does stripping units by dividing work?

$number: 16px;
$without-unit: 16px / 1px;
@warn $without-unit; // 16

edited Mar 09 '16 at 19:47

asked Feb 28 '16 at 22:52

Tom M

2,815
2
20
47

@cimmanon this question provides an answer on how to strip the unit from a value but my question was why this works. – Tom M Feb 28 '16 at 23:04
The question itself explains part of it, the answerer explains the rest. – cimmanon Feb 28 '16 at 23:08
@cimmanon updated again, I hope the question is clearer now – Tom M Mar 09 '16 at 19:48

Why does the $num / ($num * 0 + 1) strip units?

0 Answers0