Thoát {và% trong SASS

Question

Tôi đang tạo một biểu định kiểu sẽ được tải lên HubSpot CMS và tôi hy vọng phát triển tệp CSS cục bộ bằng SASS để tăng tốc mã của tôi. Tôi đang gặp khó khăn vì tệp đầu ra cần bao gồm một số thẻ mẫu độc quyền được chỉ định bởi CMS.

Đặc biệt, tôi cần tập tin CSS được tạo ra tôi để bao gồm một dòng như thế này:

{% include "hubspot/styles/responsive/required_base.css" %} 

Tôi đã thử tất cả mọi thứ tôi có thể nghĩ ra để sản xuất các { và % ký tự, nhưng Sass mang lại cho tôi lỗi không vấn đề tôi làm vì đó là những ký tự đặc biệt trong SASS.

Có cách nào để thoát khỏi một dòng mã, hoặc các ký tự riêng lẻ để SASS không cố xử lý chúng?

Answer 1

Nó không đẹp bằng bất kỳ phương tiện nào nhưng tôi đã làm việc đó. Bạn sẽ có những bình luận trống ở hai bên của nó.

$inc: '*/{% include "hubspot/styles/responsive/required_base.css" %}/*'; 
/*#{$inc}*/ 

Đầu ra:

/**/{% include "hubspot/styles/responsive/required_base.css" %}/**/ 

Đây là một bản demo: http://sassmeister.com/gist/19651edf94cf1158037f

Ở đây nó là ở dạng mixin nếu bạn sẽ được làm việc đó rất nhiều:

@mixin raw ($string) { 
    $string: '*/#{$string}/*'; 
    /*#{$string}*/ 
} 

@include raw('{% include "hubspot/styles/responsive/required_base.css" %}'); 

và một bản trình diễn nhỏ cho điều này: http://sassmeister.com/gist/50caee499ff4fe8f63c7

Nếu bạn đang sử dụng một số loại công cụ xây dựng, có lẽ tốt hơn nên thêm nó vào chính CSS. Một cái gì đó như https://github.com/godaddy/gulp-header