Question

我正在开发一个WordPress主题，并使用LESS进行CSS。 LESS有许多动态解决方案，我发现它们在整个项目中都很有用。我正在使用LESS，但不是直接使用，我正在将LESS文件编译为CSS并将它们（.css）排入网站<head>。为了编译LESS文件，我使用的是WinLESS（v.1.8.1），它是一个优秀而快速的文件。它有一个内置的minfication技术，只需单击一下，我就可以（1）编译LESS文件，（2）立即缩小它们。为了确保网站速度，我想更喜欢CSS的缩小版本。但...

但是，我们都知道WordPress主题CSS文件在标题中包含主题信息，如：

/*
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/

如果我命令WinLESS将style.less编译为Compile && Minify，那么我会将缩小版本添加到style.css，但您知道缩小的CSS不包含任何CSS注释，因此主题信息只是被这个过程所淹没。在wp-admin/themes.php页面中，主题变为无标题（未命名）。

然后我尝试了不同的东西。我将样式表分为两个文件：

style.less - 仅包含主题所需的标题信息，无其他
my-site.less - 包含所有网站CSS

我正在将style.css编译为非缩小版，但my-site.css缩小版。在style.less中，我将my-site.css中的所有CSS包含在内，或者包含：

@import (less) 'css/my-site.css`;

这样，缩小的my-site.css完全导入到style.css文件中（那里会有没有 @import CSS参数）。它们将像常规CSS代码一样包含在内，并且(less)包含[details]。

问题...
这实际上就是问题所在。虽然我正在导入一个缩小的CSS文件，但是LESS @import (less)正在逐行处理声明。

我的my-site.css就像：

*{margin:0;padding:0}html{margin:0;padding:0}

当我打开style.css文件时，它就像：

* {
  margin: 0;
  padding: 0;
}
html {
  margin: 0;
  padding: 0;
}

导入完全消除了缩小。

是否还有其他解决方案将@import CSS代码解缩为缩小的样式表？

PS：我完全了解 WP-Minify 插件（一个不错的插件），我实际上并不想第一手使用它

Answer 1

WinLess使用YUI压缩器进行缩小。（具体来说，我认为WinLess使用LESS.js，它使用YUI压缩。）因此，您可以使用特定的起始注释样式 - /*!来暗示应该保留注释的minifier：

/*!
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/

WordPress仍应识别块注释并使用主题信息。

请参阅"special comments" section of the YUI compressor documentation。

较少的CSS和WordPress主题CSS标头

1 个答案: