Less.js を導入したい

先日作ったプログラムに、Less.js という css プリプロセッサを導入したいと思いました。

修正対象となる前回の → ( https://hacknote.jp/archives/23305/ )

お手軽に導入したいので、クライアント側で Less を css に変換する方式でやりまする。

Less 本体は → ( http://lesscss.org/ )

★ 2016/11/01 : 微修正


■ index.js

変更なし

■ include_file_class.php

include_less class を新しく追記しました。

中身は css や js のときと変わらず。

final class include_less extends include_file_class
{
    /** less の読み込み(less.js より先に読みこまないと反映されないので注意) */
    const CN_REP_TAG  = '<link rel="stylesheet/less" type="text/css" href="'.self::CN_REP_STR.'" />' ;

    public function __construct()
    {
        parent::__construct() ;
    }

    /**
     * less ファイル読み込みタグ生成
     * @param $read_urls => 読み込む less の url を格納した配列
     * @return => 生成された html タグ
     * @override
     */
    public function include_file(array $read_urls)
    {
        return $this->create_tag($read_urls, self::CN_REP_TAG) ;
    }
}

■ init_html.php

Less に関する記述を追加して、css 周りはコメント。

<?php
include_once('include_file_class.php') ;
// $include_css  = new include_css() ;
$include_less = new include_less() ;
$include_js   = new include_js() ;
/*
$css_urls    = [
      './css/common.css'
] ;
*/
$less_urls   = [
      './css/common.less'
] ;
$js_urls     = [
      './js/library/jquery/3.1.1/jquery.min.js'
    , './js/library/less/2.7.1/less.min.js'
    , './js/self/common.js'
] ;
/** 出力 */
// echo $include_css->include_file($css_urls) ;
echo $include_less->include_file($less_urls) ;
echo $include_js->include_file($js_urls) ;

■ common.less

新規作成。Less 動作確認用です。

@charset "UTF-8" ;

@color_red   : #FF0000 ;
@color_blue  : #0000FF ;
@color_green : #00FF00 ;
@color_yellow: #FFFF00 ;

#font_red
{
    color : @color_red ;
}
#font_blue
{
    color : @color_blue ;
}
#font_green
{
    color : @color_green ;
}
#font_yellow
{
    color : @color_yellow ;
}

■ common.js

動作確認用。何気にyellowを追加。

$(function()
{
    var body_append = 
                      '<div id="font_red">red</div>'
            + '<div id="font_blue">blue</div>'
            + '<div id="font_green">green</div>'
            + '<div id="font_yellow">yellow</div>'
            ;
    $('body').append(body_append) ;
}) ;

他に jquery (3.1.1) も読み込んでます。

実際には↓みたいになります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <link rel="stylesheet/less" type="text/css" href="./css/common.less?ver=1477917381" />
        <script type="text/javascript" src="./js/library/jquery/3.1.1/jquery.min.js?ver=1477917384" charset="UTF-8"></script>
        <script type="text/javascript" src="./js/library/less/2.7.1/less.min.js?ver=1477917381" charset="UTF-8"></script>
        <script type="text/javascript" src="./js/self/common.js?ver=1477917385" charset="UTF-8"></script>
        <title>動作確認用</title>
    </head>
    <body>
    </body>
</html>

どんどん重くなってきますね!