May*_*lam 0 css wordpress minify less
我正在开发一个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我包括或采取所有的CSS my-site.css:
@import (less) 'css/my-site.css`;
这样,minified my-site.css被完全导入到style.css文件中(那里没有 @import CSS参数).它们将像常规CSS代码一样包含在内,(less)包括[ 详细信息 ].
问题......
这实际上是问题所在.虽然我正在导入一个缩小的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插件(一个很好的插件),我实际上并不想在第一时间使用它.
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仍然应该识别块注释并使用主题信息.