先日作ったプログラムに、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>
どんどん重くなってきますね!
