Teisingai pridedant vienetą prie skaičiaus - CSS-gudrybės

Anonim

Konvertuodami be vienetinio skaičiaus į ilgį, trukmę, kampą ar bet ką, žmonės paprastai tiesiog prideda vienetą kaip eilutę, pavyzdžiui:

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

Nors šis metodas veikia, jis toli gražu nėra idealus, nes dėl to netiesiogiai pradinė vertė perduodama kaip eilutė. Iš tikrųjų, jei $lengthnuo šiol bandysite atlikti matematiką naudodami vertę, pamatysite, kad „Sass“ greitai išmeta klaidą, nes negali atlikti matematikos operatorių eilute.

Norėdami išspręsti šią problemą, galite tai padaryti dviem būdais:

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

Bet kuris iš šių metodų teisingai sudarys skaičių, kaip tikėtasi, o ne eilutę.