Tidadigi Logo

SASS | negative variable value

Các biến SASS rất hữu ích để viết code style dễ bảo trì cho trang web. Chúng ta thường cần các thành phần khác nhau của trang có cùng giá trị style. Trong trường hợp đó, gán giá trị cho biến sẽ giảm bớt công sức sửa đổi style sau này. Đôi khi, ta cũng cần phủ định giá trị của biến cho một thuộc tính. Ví dụ, hãy xem xét đoạn code SASS dưới đây: CSS 
$marg: 20px;

#div1 {
    margin: 0 20px 0 -20px;
}
Giá trị thuộc tính 20px và -20px có thể được thay thế bằng biến $marg. Cách đơn giản nhất là: css 
$marg: 20px;

#div1 {
    margin: 0 $marg 0 -$marg;
}
Tuy nhiên, khi biên dịch, đoạn code này tạo ra CSS sau: css 
$marg: 20px;

#div1 {
    margin: 0 20px -20px;
}
Điều này xảy ra vì trình biên dịch SASS coi 0 -$marg là phép trừ và xuất ra -20px. Do đó, khi muốn sử dụng phủ định của biến, CSS có thể không mong muốn. Trình biên dịch SASS có thể nhầm lẫn ý định là phép trừ nhị phân. Có nhiều cách để giải quyết vấn đề này.
  1. Sử dụng dấu ngoặc đơn: Đặt biến trong dấu ngoặc đơn sẽ ngăn trình biên dịch thực hiện phép trừ. html 
    $marg: 20px;

#div1 {
    margin: 0 $marg 0 (-$marg);
}
  2. Thực hiện phép nhân với số âm: Chỉ cần nhân biến với -1 sẽ tạo ra số đối của nó. Đồng thời, nó vẫn giữ nguyên đơn vị gốc. css 
    $marg: 20px;

#div1 {
    margin: 0 $marg 0 -1*$marg;
}
  3. Sử dụng interpolation: Interpolation chuyển đổi giá trị thành một chuỗi không được trích dẫn. Nó có thể dùng để phủ định giá trị của biến. Tuy nhiên, cách này không được khuyến nghị vì chuỗi không trích dẫn trong CSS đầu ra trông giống số. Nó không hoạt động với toán tử số học, có thể gây hiểu nhầm. html 
    $marg: 20px;

#div1 {
    margin: 0 $marg 0 -#{$marg};
}
Trong tất cả các phương pháp trên, CSS sau đây được tạo ra khi biên dịch: 
#div1 {
    margin: 0 20px 0 -20px;
}
Bằng cách này, ta có thể dùng biến SASS cho cả trường hợp dương và âm. Từ đó, thúc đẩy tái sử dụng biến và code dễ bảo trì hơn.
Last Updated : 21/07/2025