CakePHPでLESSを使えるようにする

公開: 2014-11-25 16:29
更新: 2016-04-29 06:02

こんにちは。
普段はロゴとかサイトのデザインが好きという理由で「FuelPHP」を使用しているあっきぃです。



でもたまにはFuelちゃんに
嫉妬させることもお互いの仲を深めるために必要かと思うので、
今日は「CakePHP」にCSSの記述が10倍早くなる「LESS」のプラグインを導入してみたいと思います。




1.LESSのプラグインをダウンロード

使用するのは「Hyra/less」というプラグインです。


app/Pluginに移動しましょう。

$ cd app/Plugin

Githubからcloneします。

$ git clone --recursive https://github.com/Hyra/less.git Less



2.コンパイルに必要なフォルダなどの生成

app/webroot/lessの作成

$ mkdir app/webroot/less

app/tmp/cacheの作成

$ mkdir app/tmp/cache
$ chmod 777 app/tmp/cache

app/webroot/cssに書き込めるように

$ chmod 777 app/webroot/css



3.AppControllerのHelpersにLESSを追加

app/Controller/AppController.php

public $helpers = array('Less.Less');



4.lessify.inc.phpの書き換え

パース処理でエラーが出てしまう場合はlessify.inc.phpの366行目あたりを変更します。


app/Plugin/Less/Vendor/lessphp/lessify.inc.php

//public function parse($str = null) {
public function parse($str = null, $initialVariables = null) {



5.出力

app/webroot/less/main.lessを作成してこれを読み込ませてみます。


どっかのViewファイル

echo $this->Html->css('reset.css');
echo $this->Less->css('main'); //これ

出力結果はこんな感じ

<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />

便利。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。