使用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. 然而他们的示例片段让我挠头(从这里开始):

<?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 - 这是少编译的文件吗？
2. /mysite/ - 这个是来做什么的？？
3. /var/www/writable_folder - 这是写入css的地方吗？

请有人给我一个可以使用PHP 编译bootstrap.less并my.less进入css文件的片段吗？

Answer 1

AFAIK 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/');

来自文档:

使用Less_Cache类来保存和重用已编译的less文件的结果.此方法我们检查每个较少文件(包括导入文件)的修改时间,并在找到更改时重新生成.

我强调包括导入的文件,因为这似乎解决了你的问题.将文件合并为LESS:

styles.less:

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

并且只编译样式.

/var/www/mysite/bootstrap.less - 这是要编译的文件少吗？

是的,为什么不？确保在bootstrap.less中导入的文件与bootstrap.less位于同一目录中,或者用于$parser->SetImportDirs()设置正确的路径.

/ mysite/ - 这是为了什么？

它设置了正确的道路.如果你的LESS文件包含例如url(image.png)它输出url( /mysite/image.png).注意Bootstrap使用../作为glyphicons的路径,这将不会被纠正,甚至更糟糕的变成/mysite/../.您必须在LESS中设置此路径:@icon-font-path: "/mysite/fonts/";

/ var/www/writable_folder - 这是写入css的地方吗？

不$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中属性的前缀由构建过程中的autoprefixer完成.前面的含义是Bootstrap Less代码包含属性声明,只有在使用前缀时才使用W3C语法才能支持跨浏览器.使用less.php编译源代码不会运行autoprefixer.另见:https://github.com/oyejorge/less.php/issues/158