如何強制Sass解釋器輸出非css代碼？

我需要在css文件中包含一些非css解釋器指令（這些將在稍後由另一個解析器在運行時替代以創建有效的css）。如何強制Sass解釋器輸出非css代碼？

該文件是用scss編寫的，因此我使用ruby/node sass來編譯該文件。在這個過程中，我希望它不接觸解釋器指令，即它們應該簡單地視爲文字並輸出。說明中包含的符號在css中無效，所以給出的答案here對我不起作用。

工作正常的是當包含insruction的變量在屬性值中被引用時，例如，這個成功編譯：

$x: unquote("<<macro 'val1'>>"); 

a { 
    b: $x; // compiles into: b: <<macro 'val1'>> 
}

這種失敗：

$x: unquote("<<macro 'val1'>>"); 

@media (max-width: #{$x}) { // throws an invalid css error 
    .tc-sidebar-scrollable { 
    .tmap-desktop-editor { 
     display: none; 
    } 
    } 
}

在這兩種情況下，輸出將是無效的CSS，但在媒體查詢的情況下，它徹底失敗。我的Sass版本是3.4.13（Selective Steve）。

我該如何得到這個工作？生成的文件應該是這樣：

@media (max-width: <<macro 'val1'>>) { 
    .tc-sidebar-scrollable .tmap-desktop-editor { 
    display: none; 
    } 
}

來源

2016-01-06 B12Toaster

我做了一些搜索，並沒有找到解決辦法來解決這個問題。你不能逆過程（首先運行你的其他解析器）嗎？ – ByScripts

@ByScripts不幸的是，這是不可能的，因爲指令（<>）在運行時後來被javascript動態替換。 – B12Toaster

我做了cross post在SASS GitHub的回購和was told，媒體查詢解析之前，這就是爲什麼它不在這裏工作了插值發生。

came up in the issue discussion可能會使用自定義at-rules來「繞過Sass專有的@media處理」的可能（但仍不令人滿意）的解決方法。所以你會寫

@_media (max-width: #{$x})

和青菜編譯後運行一個替換腳本轉換成@_media@media。

另一個類似的想法是使用一個CSS-有效佔位符不符合CSS本身以及後來取代它在第二次運行後，上海社會科學院與期望的字符串結束後...

來源

2016-01-15 19:56:27 B12Toaster

如何強制Sass解釋器輸出非css代碼？

回答

相關問題