2

我有一个预处理器导入问题。我有供应商 css，我想复制功能。不幸的是，我也不能控制这种情况下的 html。所以基本上我有供应商 css 和不同的供应商 html，我正试图将一个 css 规则的功能扩展到另一个。

现在，许多 css 预处理器的基本概念是扩展规则。

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

// Mine
.bar { .foo }

在上面的示例中，您无法访问.fooor .bar，但是使用预处理器，您可以从.foointo扩展功能.bar，这对于 less/stylus/etc 非常有用。问题在于，供应商规则仅在原始 css 中定义。

话虽如此，最明显的解决方案是让 Stylus/Less 将原始 css 导入为 stylus/less。但是，似乎两者都无法真正做到这一点..我至少发现了这一点。Less 似乎不能（@import "foo.css"指令被忽略），虽然 Stylus 可以选择实际包含导入的原始 CSS，但它似乎并没有真正处理它。也就是说，它会包含 css，但@extend指令失败（也许我错了？）。

我能想到的另一个选择是将 .css 文件重命名为预处理器语言扩展名。由于我们想让供应商的东西不受我们控制，允许适当的版本控制/等，这涉及一个构建过程，该过程复制目标 css 文件并将它们重命名为目标语言扩展名，但这很容易出错。Stylus 立即遇到语法错误，Less 也很容易（因为并非所有 CSS 都是有效的 Less。大多数是，但不是全部）。

所以..在这方面还有什么其他想法吗？希望有一个选项我可能会丢失？也许 SCSS 处理得更好？

目前，我发现是/不可能..我觉得唯一稳定的方法是将原始 css 位简单地复制到我的 css 代码中。如果供应商代码更改，我将不得不手动更新，但至少我不会冒供应商内容更改的风险，并且构建过程突然失败，因为供应商引入了一些不被 less/etc 支持的 CSS 语法. 它远非好..但可能发生的最糟糕的是我的css看起来很有趣，我需要更新。

编辑：

接下来我将尝试 SCSS .. 我们将看看它是如何进行的。在网站上，他们声称所有 CSS（仅限 3 个？）语法都是有效的 SCSS

编辑2：为了清楚起见。我的问题是，给出上述场景，你会怎么做？无法导入 .css 文件（请参阅下面的注释！），并且将 .css 文件重命名为 .less/.stylus 反过来也容易出错，因为 less 不是 CSS 的完美超集（即由于专有特性）。

！笔记！：从那以后，我一直在挖掘较少的来源，看看可以做些什么来解决这个问题，而不是解决这个问题，并且遇到了十几个关于此事的支持票。其主要讨论似乎发生在#issue 1185上，更重要的是，请查看 *（我相信）解决此问题的变更日志！变更日志 1.4.0 测试版

话虽如此，这@import (less) "file.css"很可能是这里的获胜方案，即使它可能由于测试状态而存在一些错误。耶 ：）

4

3 回答 3

1

您最好的选择是 @Lee Olayvar 所说的，或者使用 LESS 中新的 ":extend()" 功能。听起来您可能已经尝试过扩展功能，但是您使用了“SASS 指令”语法（IMO 不正确地使用 at 规则），而 LESS 使用类似 CSS 的伪选择器语法：

.foo:extend(.bar) {}

如果你有耐心（在接下来的几天/几周内），你会看到一个非常适合你想做的新功能，它是 LESS 独有的。它将允许您扩展或混合外部“静默”样式。这意味着您将能够“@import”和外部样式表，但样式不会显示在您编译的代码中，除非您扩展它们或将它们用作 mixin。

顺便说一句，我是 Less.js 的核心团队，所以如果您有任何其他问题或者我是否可以提供进一步的帮助，请告诉我。

于 2013-03-17T18:16:05.773 回答
0

看起来所有导入.css的文件都不会被前置，less而只会@import在顶部添加一个。

您可以导入 CSS 和 LESS 文件。仅处理 LESS 文件导入语句，CSS 文件导入语句保持原样。如果你想导入一个 CSS 文件，并且不想让 LESS 处理它，只需使用 .css 扩展名

来源： http: //lesscss.org/

我相信你能做的最好的事情就是重命名。

于 2013-03-16T18:06:49.953 回答
0

虽然仍处于测试阶段，但新添加的@import (less) "file.css"语法应该可以正确处理所有 CSS 文件。由于“官方”支持，也可以预期/假设任何破坏 LESS 的专有语法都将被修复（尽管可能不“支持”）。

所以理论上这是最好的选择！除了 SCSS，在这种情况下我还没有尝试过。在我的测试中，手写笔仍然存在问题。

有关更多信息，请查看此问题或此更改日志。

于 2013-03-16T21:11:52.150 回答