Правильное добавление единицы к номеру - CSS-хитрости

Anonim

При преобразовании безразмерного числа в длину, длительность, угол или что-то еще, люди склонны просто добавлять единицу в виде строки, например:

$value: 42; $length: $value + px; // 42px

Хотя этот метод работает, он далек от идеала, поскольку приводит к неявному преобразованию начального значения в строку. В самом деле, если вы с этого момента попытаетесь выполнить математические вычисления со $lengthзначением, вы увидите, что Sass быстро выдает ошибку, поскольку он не может выполнять математические операторы со строкой.

Чтобы обойти эту проблему, есть два способа сделать это правильно:

$value: 42; $length: $value + 0px; // 42px
$value: 42; $length: $value * 1px; // 42px

Любой из этих методов правильно выдаст ожидаемое число, а не строку.