我正在开发一个WordPress主题,并在CSS中使用较少的内容。LESS有许多动态解决方案,我发现它们在整个项目中都很有用。我正在使用LESS,但不是直接使用,我正在将LESS文件编译成CSS,并将它们(.CSS)排入站点。为了编译较少的文件,我使用了WinLESS(v.1.8.1),这是一个非常出色和快速的文件。它有一个内置的缩小技术,这样只要单击一下,我就可以(1)编译较少的文件,(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)
[详细信息]。
问题...
这才是问题所在。虽然我导入的是一个缩小的CSS文件,但是LESS@import(LESS)
是逐行声明。
其中mymy-site.css
类似于:
*{margin:0;padding:0}html{margin:0;padding:0}
当我打开style.css
文件时,如下所示:
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
进口正在彻底消失,小型化。
是否有其他的解决方案将CSS代码导入到正在缩小的样式表中?
附注:我完全了解WP-Minify插件(一个不错的插件),实际上我并不想第一时间使用它。
WinLess使用YUI压缩器来实现它的微型化。(好吧,具体地说,我认为WinLess使用了less.js,后者使用了YUI压缩。)因此,您可以使用特定的起始注释样式--/*!
来提示迷你程序应该保留注释:
/*!
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仍应识别块评论并使用主题信息。
请参阅YUI压缩器文档的“特殊注释”部分。