导入并扩展原始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的核心团队，所以让我知道如果您有任何其他问题，或者如果我可以得到进一步的帮助。