提问者:小点点

精简的CSS和WordPress主题CSS头


我正在开发一个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文件中(这里没有@importCSS参数)。它们将像常规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插件(一个不错的插件),实际上我并不想第一时间使用它。


共1个答案

匿名用户

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压缩器文档的“特殊注释”部分。