Správné přidání jednotky k číslu - Triky CSS

Anonim

Při převodu bezjednotkového čísla na délku, trvání, úhel nebo cokoli mají lidé tendenci jednoduše připojit jednotku jako řetězec, například takto:

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

I když tato metoda funguje, není zdaleka ideální, protože má za následek implicitní seslání počáteční hodnoty jako řetězce. Ve skutečnosti, pokud se pokusíte $lengthod této chvíle dělat matematiku s hodnotou, uvidíte, že Sass rychle hodí chybu, protože nemůže dělat matematické operátory s řetězcem.

Chcete-li tento problém vyřešit, existují dva způsoby, jak to provést správně:

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

Kterákoli z těchto metod správně vytvoří číslo podle očekávání, nikoli řetězec.