Thêm đơn vị vào số một cách chính xác - Thủ thuật CSS

Anonim

Khi chuyển đổi một số không có đơn vị thành độ dài, thời lượng, góc hoặc bất cứ thứ gì, mọi người có xu hướng chỉ cần thêm đơn vị dưới dạng một chuỗi, như sau:

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

Mặc dù phương pháp này hoạt động, nhưng nó không lý tưởng vì nó dẫn đến việc truyền ngầm giá trị ban đầu dưới dạng một chuỗi. Thật vậy, nếu bạn thử làm toán với $lengthgiá trị từ bây giờ, bạn sẽ thấy rằng Sass nhanh chóng mắc lỗi vì nó không thể thực hiện các toán tử toán học với một chuỗi.

Để giải quyết vấn đề này, có hai cách để thực hiện đúng cách:

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

Bất kỳ phương thức nào trong số đó sẽ chính xác tạo ra một số như mong đợi và không phải là một chuỗi.