Sử dụng biến cho thuộc tính CSS trong Sass

Question

Tôi đang viết một @mixin với một số phép tính trong đó tính toán chiều rộng phần trăm của phần tử, nhưng vì nó rất hữu ích, tôi muốn sử dụng cùng chức năng cho các thuộc tính khác, như lề và miếng đệm.

Có cách nào để chuyển tên thuộc tính làm đối số cho mixin không?

@mixin w_fluid($property_name, $w_element,$w_parent:16) { 
    $property_name: percentage(($w_element/$w_parent)); 
} 

Answer 1

Bạn cần phải sử dụng interpolation (ví dụ. #{$var}) trên biến của bạn để cho Sass để đối xử với nó như một thuộc tính CSS. Không có nó, bạn chỉ thực hiện chuyển nhượng biến.

@mixin w_fluid($property_name, $w_element, $w_parent:16) { 
    #{$property_name}: percentage(($w_element/$w_parent)); 
} 

Answer 2

Ngoài các phản ứng @rcorbellini

Bạn có thể sử dụng chuỗi và biến cùng

@mixin margin($direction) { // element spacing 

    margin-#{$direction}: 10px; 

}