Làm cách nào để dừng Sass thêm dấu cách trước các đơn vị đo lường?

Question

Tôi đang cố gắng theo dõi this tutorial trên thiết kế bố cục đáp ứng, nhưng sử dụng SASS/SCSS làm ngôn ngữ cơ bản của tôi.

Cuối cùng, tôi đã xác định SCSS sau:

body { 
    font: 100%/1.5; 
} 

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16)em; 
    line-height:(28/$h1_size)em; 
    margin-top: (24/$h1_size)em; 
} 

Thật không may, sản lượng từ sass sang định dạng CSS trông như thế này:

h1 { 
    font-size: 1.5 em; 
    line-height: 1.167 em; 
    margin-top: 1 em; 
} 

- với các đơn vị tách ra khỏi giá trị bởi một không gian. Chrome từ chối các giá trị này là không hợp lệ và chỉ sử dụng các giá trị đó nếu tôi tự di chuyển và xóa không gian.

Có cách nào để khắc phục sự cố này bằng cách tinh chỉnh SCSS của tôi hay bằng cách chuyển tùy chọn đến sass?

Cho đến nay, tôi đã cố gắng:

• đặt các đơn vị bên trong tính toán:
  
  • (font-size: ($h1_size/16em)) => lỗi cú pháp
  • (font-size: (($h1_size)em/16) =>font-size: 24 em/16; mà là cùng một vấn đề tôi đang cố gắng sửa chữa

Answer 1

Bạn có thể đẩy em vào định nghĩa $h1_size, mà sẽ cho phép bạn chỉ đơn giản là chia cho 16 và có kết quả trong ems.

Nếu cả hai bên của bộ phận nằm trong em, kết quả của bạn sẽ không có đơn vị. Bạn có thể dễ dàng nhân với 1em để lấy lại thiết bị của bạn, nếu cần.

h1 { 
    $h1_size: 24em; 
    font-size: ($h1_size/16); 
    line-height:(28em/$h1_size); 
    margin-top: (24em/$h1_size * 1em); 
} 

Nhân bởi 1em cũng có thể làm một cái gì đó gần gũi hơn với ví dụ tác phẩm gốc của bạn. Nói chung, bạn có thể giữ mọi thứ đơn vị, sau đó chỉ nhân với 1em khi bạn muốn đơn vị xuất hiện. Điều này tránh một số vô nghĩa em phổ biến trong ví dụ đầu tiên của tôi:

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16 * 1em); 
    line-height:(28/$h1_size); 
    margin-top: (24/$h1_size * 1em); 
} 

Những cách làm cho ý nghĩa hơn chủ yếu chỉ phụ thuộc vào nếu đầu ra của bạn sẽ chủ yếu được trong một đơn vị, hoặc tất cả các loại người khác nhau (kể cả không có).

Answer 2

Đặt em vào biến, vì vậy $h1_size: 24em;

Answer 3

Bạn cần sử dụng chuỗi suy như vậy: # {$ biến} em

Đây là tài liệu tham khảo: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

Answer 4

Bạn có thể loại bỏ các không gian với một +

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16)+em; 
    line-height:(28/$h1_size)+em; 
    margin-top: (24/$h1_size)+em; 
} 

Will đầu ra .

h1 { 
    font-size: 1.5em; 
    line-height: 1.16667em; 
    margin-top: 1em; }