Simplify calc rules with rem-calc inside

The interpolation of the rem-calc function made the code harder to read.
Besides, for new code we've already agreed upon using rem units instead
of `rem-calc`.

For instance, we had the following code:

```
width: calc(100% - #{2 * rem-calc(10)});
```

Now, `2 * rem-calc(10)` is the same as `rem-calc(20)`, but we were using
`2 *` to make it clear that this value was related to the value of the
`margin-left` property, which was `rem-calc(10)`.

IMHO using `0.625rem` for the margin and `2 * 0.625rem` for the width
the code is easier to read because there are no interpolation and no
complex operations involved.
This commit is contained in:
Javi Martín
2025-02-28 13:26:33 +01:00
parent f3fe1ac6c1
commit cddce21f7b
3 changed files with 6 additions and 6 deletions

View File

@@ -5,7 +5,7 @@
flex-wrap: wrap;
> * {
flex-basis: calc((#{rem-calc(720)} - 100%) * 999);
flex-basis: calc((45rem - 100%) * 999);
flex-grow: 1;
}