Toán học với các biến nội suy?

Question

Xem xét sass sau:

$font-size: 18;     
$em: $font-size; 

$column: $font-size * 3;  // The column-width of my grid in pixels 
$gutter: $font-size * 1;  // The gutter-width of my grid in pixels 

$gutter-em: #{$gutter/$em}em; // The gutter-width in ems. 
$column-em: #{$column/$em}em; // The column-width in ems; 

$foo = $gutter-em/2; // This results in a value like "1em/2". :(
$bar = ($gutter-em/2); // this doesn't work either, same as above. 

Làm thế nào tôi có thể tạo ra một $foo mà làm việc, và tôi có thể tái sử dụng hơn nữa trong các biểu thức khác?

Answer 1

Sass không thể thực hiện các phép toán số học trên chuỗi, chỉ nối. Khi bạn sử dụng nội suy, những gì bạn đã tạo là một chuỗi trông giống như một số:

@debug type-of(#{10px});   // string 
@debug type-of('10px');   // string 
@debug type-of(unquote('10px')); // string 
@debug type-of(10px);   // number 

Nếu bạn muốn có một số, không sử dụng phép nội suy và không sử dụng dấu ngoặc kép. (. Ví dụ 10) để chuyển đổi một số nguyên cho một chiều dài (. Ví dụ 10px), sử dụng phép nhân:

$gutter-em: ($gutter/$em) * 1em; 
@debug type-of($gutter-em);  // number