css - LESS 优化与缩小 CSS 文件

Question

以前从来没有做过，所以我的理解可能完全不对。我知道 LESS 优化和缩小了你的 CSS。那么...是只使用 LESS 更好还是您仍然应该以某种方式缩小您的文件？

请随时提出我不知道的其他差异。

Answer 1

Less 是一个预处理器，它编译成静态 CSS。 Less 使您能够使用变量和混入，帮助您编写 DRY 和可重用的代码。

例子:

CSS:

p {
color:red;
}
h1 {
color: red;
}

减少:

@color: red;

p {
color: @color;
}

h1 {
color: @color;
}

如果你想使用yellow而不是red，你只需要现在改变@color: red;。

mixin 也是一样，Less:

.default-style() {
color: @color;
border: 1px solid black;
}

p {
.default-style();
}

h1 {
.default-style();
}

如果您不再需要默认样式的边框，您只需从 .default-style() 混合宏中删除 border 属性。

Less 不会缩小或优化您的(已编译)CSS 代码。

从 Less 2 开始，您可以使用插件对编译后的 CSS 代码进行后处理。此插件可以缩小/压缩或优化您的代码。

例如使用 clean-css ( https://github.com/less/less-plugin-clean-css ) 进行压缩，使用 CSScomb ( https://github.com/bassjobsen/less-plugin-csscomb ) 进行优化。