轉義{和％SASS

我正在構建一個將被上傳到HubSpot CMS的樣式表，並且我希望在本地使用SASS開發CSS文件來加速我的編碼。我遇到了困難，因爲輸出文件需要包含由CMS指定的一些專有模板標籤。轉義{和％SASS

特別是，我需要生成CSS文件以包含這樣一行：

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

我用盡了一切我能想到的輸出{和%字符，但SASS給我的錯誤沒有因爲那些是SASS中的特殊字符，所以我要做的事情。

有沒有辦法逃避一行代碼或單個字符，以便SASS不會嘗試處理它們？

來源

2014-06-06 Alert My Banjos

這不是很漂亮，但我得到它的工作。你會在它的邊上留下空的評論。

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

輸出：

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

這裏是一個演示：http://sassmeister.com/gist/19651edf94cf1158037f

這是混入形式，如果你會做了很多：

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

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

和這也是一個小演示：http://sassmeister.com/gist/50caee499ff4fe8f63c7

如果您使用某種構建工具，它可能會更好地將其添加到CSS本身。像https://github.com/godaddy/gulp-header

來源

2014-06-06 15:39:44

雖然這樣做毫無疑問是一個可怕的想法，我不得不說這個黑客非常聰明。如果我可以提出一個小小的改進：將第二個'/ *'移到字符串中，所以行如下所示：'/ *＃{$ inc} * /'。同樣的結果，看起來更好。 –

真棒hackery。 – artlung

接受@ bill-criswell的答案，因爲這是一個非常聰明的解決方案。我實際上最終使用Grunt來解決這個問題，這樣我就可以生成兩個獨立的css構建...一個乾淨的用於本地開發，另一個用HubSpot需要的奇怪頭部。 –

回答

相關問題