php - 使用 PHP 为 Bootstrap 3 编译更少的 CSS

Question

我知道 PHP 中有两个 LessCSS 编译器:

• http://leafo.net/lessphp/
• http://lessphp.gpeasy.com/

两者都声称与 Bootstrap(第 3 版)兼容。然而，鉴于这三个方面的陡峭学习曲线，我正在努力使任何事情顺利进行。简而言之，我只想实现以下目标:

在 PHP 中一起编译多个 .less 文件:

1. bootstrap.less
2. my.less

在 leafo.net/lessphp 中编译单个文件很容易，我发现:

require_once 'lessc.inc.php'; 
$less = new lessc;
$less->checkedCompile("my.less", "mainless.css");

但是我不确定这个库是否是为多个文件设计的。 (如果可以，应该怎么做？)

我决定继续使用另一个库，它明确演示了如何为 Bootstrap 进行编译:lessphp.gpeasy.com。然而，他们的示例片段让我摸不着头脑(摘自 here ):

<?php
require 'less.php/LessCache.php';
$files = array( '/var/www/mysite/bootstrap.less' => '/mysite/' );
Less_Cache::$cache_dir = '/var/www/writable_folder';
$css_file_name = Less_Cache::Get( $to_cache );
$compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name );

在查看了他们的其他示例之后，我意识到 $files 和 $to_cache 是一个拼写错误:它们应该是同一个变量。但是在阅读了文档并查看了源代码之后，我放弃了尝试计算以下字符串是否准确传达了它们的目的:

1. /var/www/mysite/bootstrap.less - 这是要编译的 less 文件吗？
2. /mysite/ - 这是做什么用的？？
3. /var/www/writable_folder - 这是写入 css 的地方吗？

有人能给我一个片段，它可以使用 PHP 将 bootstrap.less 和 my.less 编译成 css 文件吗？

Answer 1

据我所知http://leafo.net/lessphp/与 Boostrap 3 > 3.0.0 不兼容，请参阅 https://github.com/leafo/lessphp/issues/503

http://lessphp.gpeasy.com/对我有用 我已经成功地将它用于 JBST ( https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82 ) 我没有使用缓存功能。

如果没有缓存，你可以为你包含的每个文件调用$parser->parseFile()，它会编译成一个文件。 array(/var/www/mysite/bootstrap.less' => '/mysite/');。对多个文件使用数组的数组:array(array(/var/www/mysite/bootstrap.less' => '/mysite/'), array(/var/www/mysite/.less' => '/mysite/'));

<?php
$parser = new Less_Parser();
$parser->parseFile( '/var/www/mysite/bootstrap.less', 'http://example.com/mysite/' );
$parser->parseFile( '/var/www/mysite/mainless.css', 'http://example.com/mysite/' );
$css = $parser->getCss();

Less_Cache::Get 似乎一次只能处理一个文件。

更新 正如@user697576 所评论的Less_Cache::Get() 接受单个文件或列表(文件数组)。单个文件将是数组，如 array(/var/www/mysite/bootstrap.less' => '/mysite/');

来自文档:

Use the Less_Cache class to save and reuse the results of compiled less files. This method we check the modified time of each less file (including imported files) and regenerate when changes are found.

我突出显示包括导入的文件，因为这似乎可以解决您的问题。用 LESS 合并你的文件:

styles.less:

@import "my.less"; 
@import "mainless.css";

并且只编译 styles.less。

/var/www/mysite/bootstrap.less - Is this the less file to be compiled?

是的，为什么不呢？确保在 bootstrap.less 中导入的文件在与 bootstrap.less 相同的目录中可用，或者使用 $parser->SetImportDirs() 设置正确的路径。

/mysite/ - what is this for??

它设置了正确的路径。如果您的 LESS 文件包含例如 url(image.png)，它会输出 url(/mysite/image.png)。注意 Bootstrap 使用 ../作为字形路径，这不会被更正或者更糟的是变成/mysite/../。您必须在 LESS 中设置此路径:@icon-font-path: "/mysite/fonts/";

/var/www/writable_folder - Is this wherethe css is written to?

在 $compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); 之后没有 $compiled 包含你必须编写的(编译的)CSS这到一个文件。或者使用: $css_file_name = Less_Cache::Get( $to_cache );在您的 HTML 中:

    <link rel="stylesheet" type="text/css" href="/writable_folder/<?php echo $css_file_name;?>"> 

更新 请注意，自 Bootstrap 3.2.0 以来。 Bootstrap 中属性的前缀是由构建过程中的自动前缀完成的。前面意味着 Bootstrap Less 代码包含仅使用 W3C 语法的属性声明，而跨浏览器支持需要前缀。使用 less.php 编译源代码不会运行自动前缀。另请参阅:https://github.com/oyejorge/less.php/issues/158