[Todo] percent-range() -> decimal-range() #267
Conversation
| $list: list.append($list, ($range * $end) + $begin); | ||
| } @else { | ||
| $list: list.append($list, $range * $end); | ||
| } |
There was a problem hiding this comment.
I rename $end to $multiply
// range example
If $begin is 1 -> 1, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,
if $begin is 0 -> 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1
There was a problem hiding this comment.
This looks good. We should write some tests to make sure this works exactly as we expect. Oh I just noticed you wrote some tests! 😆 Congrats!
| } | ||
|
|
||
| @each $rv in get.decimal-range(1, 1) { | ||
| // $rv : 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2, | ||
| .scale-#{get.abs($rv * 100)} { | ||
| @include mixins.variants($composed...) { | ||
| --transform-scale: #{$rv}; |
There was a problem hiding this comment.
$-scale-range values which is deleted, increase by 0.1 from 0 to 2.
// 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,
My decimal-range() function, however, can make only from 0 to 1.
get.decimal-range(0.1) // 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1So I created two different @each The first one starts from 0, the second starts from 1.
And I want to combine these two @each as they have same code inside. Can I do like this?
@for $i from 0 through 1 {
@each $rv in get.decimal-range(0, $i) {
.scale-#{get.abs($rv * 100)} {
@include mixins.variants($composed...) {
--transform-scale: #{$rv};
}
}
}Or is there better way to do it making the values from 0 to 2?
There was a problem hiding this comment.
Well the basic idea is that we can do something like utils.list-of(decimal-range(...), decimal-range(...)). That way decimal ranges only worry about incrementing from like 0 to 1, or 1 to 2, but doesn’t go from 0 to 2. That’s probably how I would get around this.
| // NOTE: Do not use `em($rv)`. | ||
| // | ||
| // - 0.1 + em -> 0.01em | ||
| // - em(0.1) -> 0.00625em | ||
| // | ||
| @mixin letter-spacing($variants...) { | ||
| @include mixins.compose($variants) using ($composed) { | ||
| @each $rv in $-range { | ||
| @each $rv in get.decimal-range(0, -0.1) { |
There was a problem hiding this comment.
I see what you did here. There’s a small utility you can use to combine these loops. So you can use utils.list-of (I think that’s what it’s called, you can double-check the utils folder). It will create a new list from two separate lists. So you should be able to refactor this to be like: utils.list-of(get.decimal-range(0, -0.1), get.decimal-range(0, 0.1)) and that will enable you to only have to have one loop instead of two.
The get.n() function just tells you in a number is negative or positive. So if we have separate loops, we have to have get.n() for the negative loop. So you don’t to worry about negative values when you combine loops. That is handled automatically.
| } | ||
|
|
||
| @each $rv in get.decimal-range(1, 1) { | ||
| // $rv : 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2, | ||
| .scale-#{get.abs($rv * 100)} { | ||
| @include mixins.variants($composed...) { | ||
| --transform-scale: #{$rv}; |
There was a problem hiding this comment.
Well the basic idea is that we can do something like utils.list-of(decimal-range(...), decimal-range(...)). That way decimal ranges only worry about incrementing from like 0 to 1, or 1 to 2, but doesn’t go from 0 to 2. That’s probably how I would get around this.
| @@ -52,3 +53,16 @@ | |||
| @function percent-range() { | |||
There was a problem hiding this comment.
In theory we can delete percent-range right? Decimal-range is supposed to do all of this for us, I think. A percent-range in theory is just like, 0 to 100% or like decimal-range(0, 100) with a percent sign. Maybe we can add a third parameter that enables support for percentage-based values instead? This isn’t something for you to worry about, but yeah, the idea is to have one getter that deals with all decimal-based incrementing.
| $list: list.append($list, ($range * $end) + $begin); | ||
| } @else { | ||
| $list: list.append($list, $range * $end); | ||
| } |
There was a problem hiding this comment.
This looks good. We should write some tests to make sure this works exactly as we expect. Oh I just noticed you wrote some tests! 😆 Congrats!
|
|
||
| //test decimal-range | ||
| test("integration", () => { | ||
| expect(errSass(`decimal-range(0, 0.1)`)).toThrowError("0 0.01 0.02 0.025 0.03 0.04 0.05 0.06 0.07 0.075 0.08 0.09 0.1") |
There was a problem hiding this comment.
This is great. I would just add some code to check that this works the same for negative values. Nice work!
No description provided.