Prawidłowe dodawanie jednostki do numeru - CSS-Tricks

Anonim

Konwertując liczbę bez jednostek na długość, czas trwania, kąt lub cokolwiek innego, ludzie mają tendencję do dodawania jednostki jako ciągu, na przykład:

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

Chociaż ta metoda działa, jest daleka od ideału, ponieważ powoduje niejawne rzutowanie wartości początkowej jako ciągu. Rzeczywiście, jeśli $lengthod teraz spróbujesz wykonać obliczenia matematyczne z wartością, zobaczysz, że Sass szybko zgłasza błąd, ponieważ nie może wykonywać operatorów matematycznych na łańcuchu.

Aby obejść ten problem, można to zrobić poprawnie na dwa sposoby:

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

Każda z tych metod poprawnie zwróci liczbę zgodnie z oczekiwaniami, a nie ciąg.