Làm cách nào để sử dụng biến Sass trong một hàm JavaScript?

Question

Tôi có một biến trong Sass xác định số lượng columns được cho là phù hợp với 1 row cho hệ thống lưới của tôi.

Thông thường, đó là 12 columns.

Trong JavaScript, tôi có chức năng kiểm tra xem có nhiều hơn 12 column s trong một row hay không.

Nếu có, nó ẩn toàn bộ hàng.

Chức năng này trông như thế này:

function checkColumns() { 
    var maxColumns = 12; 
    $('.row').each(function() { 
     var elementsLength = $(this).children('.column').length; 
     if (elementsLength > maxColumns) { 
      $(this).remove(); 
     } 
    }); 
} 

Có cách nào để thay đổi biến maxColumns để cùng một số mà là ở biến sass của tôi? Bên cạnh đó sau đó thay đổi nó bằng tay mỗi khi tôi thay đổi số trong tập tin sass của tôi.

Answer 1

Chỉ cần nhìn thấy điều này trước đây sáng nay ở đây: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

Trước tiên, bạn cần phải bao gồm: https://github.com/vigetlabs/sass-json-vars

Cài đặt đá quý:

gem install sass-json-vars 

Nơi các biến trong tệp json

// variables.json 
{ 
    "font-sans": "Helvetica, sans-serif", 
    "colors": { 
     "red": "#c33" 
    } 
} 

nhập các tập tin trong Sass để lộ tên biến:

@import "variables.json" 

body { 
    color: map-get($colors, red); 
    font: $font-sans; 
} 

Yêu cầu sass-json-vars khi biên dịch

sass style.scss -r sass-json-vars