使用PHP为Bootstrap 3编译更少的CSS [英] Compiling Less CSS for Bootstrap 3 with PHP
问题描述
我知道PHP中有两个LessCSS编译器:
There are two LessCSS compilers in PHP that I am aware of:
- http://leafo.net/lessphp/
- http://lessphp.gpeasy.com/
两者都声称与Bootstrap(版本3)兼容.但是，鉴于这三个方面的陡峭学习曲线，我正在竭尽全力.简而言之，我只想实现以下目标:
Both claim to be compatible with Bootstrap (version 3). However I am struggling to get anything going given the steep learning curve of these three facets. In short, I just want to achieve the following:
在PHP中一起编译多个.less文件:
- bootstrap.less
- 我的情况
- bootstrap.less
- my.less
在leafo.net/lessphp中编译单个文件很容易，我发现:
Compiling a single file in leafo.net/lessphp was easy, I found:
require_once 'lessc.inc.php';
$less = new lessc;
$less->checkedCompile("my.less", "mainless.css");
但是，我不确定该库是否针对多个文件而设计. (如果是这样，怎么/应该怎么做?)
However I am not sure if the library is designed for multiple files. (If so, how could/should it be done?)
我决定转到另一个库，该库明确演示了如何为引导程序进行编译:lessphp.gpeasy.com.但是，他们的示例片段让我挠头(摘自此处):
I decided to move on to a different library which explicitly demonstrated how to compile for bootstrap: lessphp.gpeasy.com. However their example snippet has left me scratching my head (taken from 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是一个错字:它们的含义是相同的变量.但是在阅读了文档并查看了源代码之后，我放弃了尝试确定以下字符串是否准确传达了它们的目的:
After looking at their other examples, I realised that $files and $to_cache were a typo: they are meant to be the same variable. But after reading documentation and looking at source I gave up trying to work out if the following strings were accurately conveying their purpose:
-
/var/www/mysite/bootstrap.less-这是较少要编译的文件吗? -
/mysite/-这是干什么的? -
/var/www/writable_folder-这是CSS写入的位置吗?
/var/www/mysite/bootstrap.less- Is this the less file to be compiled?/mysite/- what is this for??/var/www/writable_folder- Is this where the css is written to?
请有人给我一个片段，用PHP将bootstrap.less和my.less编译为CSS文件吗?
Please could someone give me a snippet that would compile bootstrap.less and my.less into css file(s) using PHP?
推荐答案
AFAIK http://leafo.net/lessphp/与Boostrap 3> 3.0.0不兼容，请参见 https://github.com /leafo/lessphp/issues/503
AFAIK http://leafo.net/lessphp/ is not compatible with Boostrap 3 > 3.0.0, see https://github.com/leafo/lessphp/issues/503
http://lessphp.gpeasy.com/对我有用，我已经成功将其用于JBST( https://github.com/bassjobsen/jamedo-bootstrap-start-theme /issues/82 )我没有使用缓存功能.
http://lessphp.gpeasy.com/ works for me i have successful used it for JBST (https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82) i didn't use the cache function.
没有缓存，您可以为包含的每个文件调用$parser->parseFile()，它将编译为一个文件. array(/var/www/mysite/bootstrap.less' => '/mysite/');.对多个文件使用数组数组:array(array(/var/www/mysite/bootstrap.less' => '/mysite/'), array(/var/www/mysite/.less' => '/mysite/'));
Without caching you can call $parser->parseFile() for every file you include, it will compile to one file. array(/var/www/mysite/bootstrap.less' => '/mysite/');. Use an array of array's for multiple files: 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/');
update As commented by @user697576 Less_Cache::Get() accepts a single file or a list (array of files). A single file will be array like array(/var/www/mysite/bootstrap.less' => '/mysite/');
从文档中
使用Less_Cache类保存和重用已编译的结果 较少的文件.这种方法我们检查每个少文件的修改时间 (包括导入的文件)并在找到更改后重新生成.
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合并文件:
I highlight including imported files cause this seems to solve your problem. Merge your files with LESS:
styles.less:
styles.less:
@import "my.less";
@import "mainless.css";
并且仅编译样式.
/var/www/mysite/bootstrap.less-这是要编译的较少文件吗?
/var/www/mysite/bootstrap.less - Is this the less file to be compiled?
是的，为什么不呢?确保在bootstrap.less中导入的文件与bootstrap.less在同一目录中可用，或使用$parser->SetImportDirs()设置正确的路径.
Yes, why not? Make sure the files imported in bootstrap.less are available in the same directory as bootstrap.less, or use $parser->SetImportDirs() to set the right path.
/mysite/-这是做什么用的?
/mysite/ - what is this for??
它设置正确的路径.如果您的LESS文件包含例如url(image.png)，则输出url( /mysite/image.png).注意Bootstrap使用../作为字形图标的路径，这将无法得到纠正，甚至更糟的是变成/mysite/../.您将必须在LESS中设置以下路径:@icon-font-path: "/mysite/fonts/";
It setting the right path. If you LESS file contain for example url(image.png) it outputs url( /mysite/image.png). Note Bootstrap use ../ for the path of the glyphicons, this won't be corrected or even worse become /mysite/../. You will have to set this path in LESS: @icon-font-path: "/mysite/fonts/";
/var/www/writable_folder-这是CSS写入的位置吗?
/var/www/writable_folder - Is this wherethe css is written to?
在$compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); $compiled之后的Nope包含您必须将此(已编译)的CSS写入文件中.或使用:$ css_file_name = Less_Cache :: Get($ to_cache);在您的HTML中:
Nope after $compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); $compiled contains the (compiled) CSS you have to write this to a file. Or use: $css_file_name = Less_Cache::Get( $to_cache ); in your HTML:
<link rel="stylesheet" type="text/css" href="/writable_folder/<?php echo $css_file_name;?>">
更新 请注意，自Bootstrap 3.2.0起. Bootstrap中属性的前缀是由自动前缀在构建过程中完成的.前面的意思是，更少的Bootstrap代码代码包含属性声明，该属性声明仅使用W3C语法，而跨浏览器支持则需要前缀.使用less.php编译源代码不会运行autoprefixer.另请参阅: https://github.com/oyejorge/less.php/issues/158
update Notice that since Bootstrap 3.2.0. prefixing of the properties in Bootstrap is be done by the autoprefixer in the build process. The preceding means that the Bootstrap Less code code contain property declaration which only use the W3C syntax whilst prefixing is required for cross browser support. Compiling your source with less.php does not run the autoprefixer. See also: https://github.com/oyejorge/less.php/issues/158
这篇关于使用PHP为Bootstrap 3编译更少的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
