導入並擴展原始CSS？

Question

我有預處理器導入問題。我有供應商的CSS，我想複製功能。不幸的是，我不控制html這種情況..所以基本上我有供應商的css &不同供應商的HTML，我試圖擴展一個CSS規則的功能到另一個。

現在，許多css預處理器的基本概念是擴展規則。

// Vendor 
.foo { font-weight: bold; } 
.bar { text-color: red; } 

// Mine 
.bar { .foo } 

在上面的例子中，你沒有訪問.foo或.bar，但隨着預處理器，你可以從.foo擴展功能爲.bar，偉大的工程少/筆/等。問題在於供應商規則只在raw css中定義。

所以說，最明顯的解決方案是有Stylus/Less導入原始的css作爲手寫筆/少。但是，似乎都沒有能夠真正做到這一點。至少我發現了這一點。少似乎不能（@import "foo.css"指令被忽略）雖然Stylus有一個選項實際包括導入的原始CSS，它似乎並沒有真正處理它。也就是說，它會包含css，但@extend指令失敗（也許我錯了？）。

我能想到的另一個選項是將.css文件重命名爲預處理器語言擴展。由於我們想讓供應商的東西不在我們的手中，允許正確的版本控制/等，這涉及一個構建過程，它複製目標css文件並將它們重命名爲目標語言擴展，但這很容易出錯。手寫筆立即遇到了語法錯誤，並且少可能一樣容易（因爲不是所有的CSS都是有效的，大部分是，但不是全部）。

那麼..在這方面的任何額外的想法？希望有一個選項，我可能會錯過？也許SCSS處理這個更好？

目前，我發現的是/是不可能的..我覺得唯一的穩定的方法是簡單地將原始的CSS位複製到我的CSS代碼。如果供應商代碼發生變化，我將不得不手動更新，但至少我不會冒着供應商東西發生變化的風險，並且突然間構建過程失敗，因爲供應商推出了一些不受較少/ etc支持的CSS語法。這遠不是好事......但最糟糕的情況是我的CSS看起來很有趣，而且我需要更新。

編輯：

我要去嘗試下SCSS ..我們將看看怎麼回事。在網站上，他們要求所有的CSS（3只？）語法是有效的SCSS

EDIT2：爲清楚。我的問題是，給上面的場景，你做什麼？導入.css文件是不可能的（請參閱下面的註釋！），並且將.css文件重命名爲.less/.stylus反過來可能容易出錯，因爲less不是CSS的完美超集（即由於專有特性）。

！注意！：從那時起，我一直在深入研究解決這個問題的方法，而不是解決這個問題，並且在這個問題上遇到了一打支持票。其中主要討論似乎發生在#issue 1185，更重要的是，查看哪些*（我相信）解決此問題的更新日誌！ CHANGELOG 1.4.0 Beta

因此，儘管如此，@import (less) "file.css"可能是這裏的勝利場景，即使它可能由於測試版狀態而存在一些缺陷。 Yay :)

Answer 1

雖然仍處於測試階段，但新添加的@import (less) "file.css"語法應正確處理所有CSS文件。由於「官方」的支持，也可以預計/假設破壞LESS的任何專有語法將被固定爲（儘管可能不是「支持的」）。

所以理論上這是最好的選擇！除了SCSS，我還沒有在這種情況下嘗試過。在我的測試中，手寫筆仍然存在問題。

欲瞭解更多信息，檢查出this issue或this changelog。

Answer 2

看起來好像所有導入的.css文件都不會被less預先處理，但只會在頂部添加@import。

您可以同時導入CSS和LESS文件。只處理LESS文件導入語句，CSS文件導入語句保持原樣。如果要導入CSS文件，並且不想LESS處理，只需要使用擴展名爲.css的

來源：http://lesscss.org/

你可以做的是重新命名的最好的事情我相信。

Answer 3

最好的選擇是@Lee Olayvar說的，或者在LESS中使用新的「：extend（）」功能。聽起來你可能已經嘗試了擴展功能，但是你使用了「SASS指令」語法（IMO不適合使用at-rule），而LESS使用類似CSS的僞選擇器語法：

.foo:extend(.bar) {} 

如果您有耐心（未來幾天/幾周），您將看到一個新功能完美您想要做什麼，它是LESS獨一無二的。 它將允許您擴展或混入外部「無聲」風格。這意味着你將能夠「@import」和外部樣式表，但是這些樣式不會顯示在你的編譯代碼中，除非你擴展它們或者將它們用作混合。

我在Less.js btw的核心團隊，所以讓我知道如果您有任何其他問題，或者如果我可以得到進一步的幫助。