elboletaire / less-cake-plugin
CakePHP 的 Less 解析器插件
Requires
- cakephp/cakephp: ~3.0
- oyejorge/less.php: ~1.7
Requires (Dev)
- phpunit/phpunit: ~4.8
- squizlabs/php_codesniffer: ~2.3
This package is auto-updated.
Last update: 2024-09-08 06:47:52 UTC
README
此插件包含一个辅助器,可以帮助您在 CakePHP 3.0 应用程序中解析 .less
文件。
默认情况下,辅助器将使用 less.php 将所有 Less 文件解析为 CSS 文件,但如果因任何原因失败,将回退到该插件包含的 less.js 解析器(这样您将能在屏幕上看到任何错误)。
安装
您可以使用 composer 将此插件安装到您的 CakePHP 应用程序中。
安装 composer 软件包的推荐方法是
composer require elboletaire/less-cake-plugin
安装后,您需要在您的 bootstrap.php
文件中加载它
Plugin::load('Less');
并将它加载到您的 (App) 控制器中
public $helpers = ['Less.Less'];
使用方法
默认情况下,它将使用具有缓存功能的 php 解析器压缩文件。这将填充您的 css
文件夹,其中包含一些以 lessphp_
开头的文件,用于缓存。我建议您将这些文件添加到您的 .gitignore
文件中,以防止提交它们
lessphp_*
基本上,您给辅助器一个要加载的 Less 文件(通常来自 /less
目录),它会返回编译后的 CSS 的 html 链接标签
echo $this->Less->less('less/styles.less'); // will result in something like... <link rel="stylesheet" href="/css/lessphp_8e07b9484a24787e27f9d71522ba53443d18bbd2.css" />
如果您传递一个数组,您可以编译多个文件
echo $this->Less->less(['less/myreset.less', 'less/styles.less']); // They will be compiled in the same file, so the result will be the same as the previous one <link rel="stylesheet" href="/css/lessphp_e0ce907005730c33ca6ae810d15f57a4df76d330.css"/>
或者您可以使用 HtmlHelper 加载 Less 文件,并将文件发送到 CSS 块
$this->Html->css('/less/styles.less?', ['block' => true, 'rel' => 'stylesheet/less']);
注意文件名末尾的
?
。它用于强制使用 .less 扩展名。否则,它会被 UrlHelper 覆盖为styles.less.css
。
然后使用 fetch 方法解析所有文件
echo $this->Less->fetch(); echo $this->fetch('css');
默认情况下,任何找到的 Less 文件都将从 CSS 块中删除,因此不会打印。
您还可以将任何选项传递给 less.js 和 less.php 解析器
echo $this->Less->less('less/styles.less', [ 'js' => [ // options for lessjs (will be converted to a json object) ], 'parser' => [ // options for less.php parser ], // The helper also has its own options ]); // Same if using the fetch method, but the options are as first param: echo $this->Less->fetch(['js' => []]);
如果您想直接使用 less.js 解析器,而不仅仅是作为回退,或者您想使用 #!watch 方法,您可以通过将 js 解析器设置为开发模式来实现
echo $this->Less->less('less/styles.less', ['js' => ['env' => 'development']]);
这将输出所有 Less 文件的链接以及需要的 js 文件,仅使用 less.js 解析器来解析内容。
注意:如果 php 解析器出现错误,辅助器将回退到 js 解析器,因此您可以在屏幕上看到错误。如果您无法看到这些错误,请检查日志文件夹中的
error.log
文件;它将包含由 less.php 解析器生成的任何错误。
要加载插件中的 Less 文件,可以使用插件符号
echo $this->Less->less('Bootstrap.less/styles.less'); // or... echo $this->Less->less('/Bootstrap/less/styles.less'); // both will load plugins/Bootstrap/webroot/less/styles.less file
选项
除了 less.js 和 less.php 解析器的选项之外,您还可以设置三个选项到辅助器
cache
:默认为 true。如果禁用,输出将是以<style>
标签包裹的原始 CSS。tag
:默认为 true。是否返回带有正确标签的代码(启用缓存时为链接标签,禁用缓存时为 style 标签)。less
:默认为/bootstrap/js/less.min
。您可以使用此变量来设置自定义的 less.js 文件。
// Get the link to the resulting file after compressing $css_link = $this->Less->less('less/styles.less', [ 'tag' => false ]); // Get the compiled CSS (raw) $compiled_css = $this->Less->less('less/styles.less', [ 'cache' => false, 'tag' => false ]);
LessHelper的默认设置是压缩所有由less.php解析器生成的CSS。要覆盖此设置,请在less.php解析器选项中将compress
设置为false
echo $this->Less->less('less/styles.less', [ 'parser' => ['compress' => false] ]);
修改变量
最后但同样重要的是,如果您想覆盖less文件中设置的任何变量,可以使用$modify_vars
参数
echo $this->Less->less(['less/styles.less'], [], ['bgcolor' => 'magenta']); echo $this->Less->fetch([], ['bgcolor' => 'magenta']); // Will overwrite any @bgcolor found in styles.less to #f0f
许可协议
Copyright 2015 Òscar Casajuana (a.k.a. elboletaire)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://apache.ac.cn/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
imitations under the License.