Правильне додавання одиниці до числа - CSS-хитрощі

Anonim

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

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

Хоча цей метод працює, він далеко не ідеальний, оскільки призводить до неявного лиття початкового значення у вигляді рядка. Дійсно, якщо ви спробуєте робити математику зі $lengthзначенням відтепер, ви побачите, що Сасс швидко видає помилку, оскільки не може робити математичні оператори за допомогою рядка.

Щоб обійти цю проблему, це можна зробити двома способами:

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

Будь-який із цих методів правильно створить число, як очікувалося, а не рядок.