LESS Compiler in PHP

July 6th, 2016

เมื่อก่อนเราเขียน CSS หลายพันบรรทัด ยิ่งไซต์ไหนมีการ customize เยอะๆ ก็จะยิ่งมี CSS หลายบรรทัด หลายไฟล์ ทำให้ยุ่งยากต่อการ maintain ซึ่งปัญหาเหล่านี้จะหมดไปเมื่อหันมาใช้ LESS

หลายคนอาจจะรู้จัก LESS มากันแล้ว แต่จะขอเกริ่นหน่อยสำหรับคนที่ยังไม่เคยรู้จัก ไม่เคยใช้มาก่อน
จริงๆแล้ว LESS มันก็คือ Superset ของ CSS เราสามารถประกาศตัวแปร, functionเพื่อที่จะใช้ในการอ้างอิง properties ใน CSS หลังจากที่ประกาศตัวแปรแล้ว LESS จะ compile ออกมาเป็น css ทำให้เวลาที่เราต้องการแก้ค่า properties อะไรๆใน CSS ก็จะง่ายขึ้น แค่ไปแก้ตัวแปรในไฟล์ less ที่เดียว ไม่ต้องเสียเวลาหาว่าบรรทัดไหน ไฟล์ไหนใช้ properties แบบนี้บ้าง

ในการใช้ LESS มีหลากหลายวิธีมาก ขึ้นอยู่กับความต้องการของผู้ใช้ ว่าจะใช้ในรูปแบบไหน อย่างเช่น

  • ใช้ LESS javascript โดยสามารถไปโหลดได้ที่ LESS Website แล้ว include script เข้าไปที่ <head> จากนั้นสร้างไฟล์ .less โดยประกาศ rel="stylesheet/less"
  • ใช้ command-line ในการ compile less file ต้อง install less ใน command-line ก่อน
    npm install less -g
    lessc style.less > style.css
  • ใช้โปรแกรมในการ Compile อย่างเช่น: SimpLESS
  • สร้าง compiler เพื่อใช้ในการ compile .less file โดยเราสามารถกำหนดตัวแปรต่าง หรือรับค่ามาจาก options อื่น มาเพื่อใช้ในการ compile ในบทความนี้เราจะพูดถึง lessphp สามารถนำมาใช้กับ  Wordpress ได้

ในบทความนี้ขอไม่กล่าวถึงวิธีการเขียน less เพราะสามารถอ่านได้จาก LESS CSS หรือจากบล็อกต่างๆ

lessphp เป็น compiler ที่เขียนด้วย PHP ขั้นตอนมีดังนี้:

    • ติดตั้ง lessphp ดาวน์โหลดได้ที่ leafo.net/lessphp
    • หลังจาก download มาแล้ว จะได้โฟลเดอร์ lessphp มา เอาไฟล์ที่ชื่อ 'lessc.inc.php' มาไว้ใน theme โฟลเดอร์ เช่น
/wp-content/themes/yourtheme/cssfolder/lessc.inc.php
  • สร้าง .less ไฟล์ วางไว้ใน path เดียวกับ 'lessc.inc.php'
  • สร้าง compiler ไฟล์ วางไว้ใน path เดียวกับ 'lessc.inc.php' เช่นเดียวกัน
  • ใน compiler ไฟล์ (php file) เราจะ require 'lessc.inc.php' เข้ามาเพื่อประกาศเป็น new instance ของ lessc
require "lessc.inc.php";
$less = new lessc;
echo $less->compile(".block { padding: 3 + 4px }");
แค่นี้เราก็จะได้ css ออกมาเป็น
.block {
    padding: 7px;
}

นอกจากนี้เรายังสามารถ compile ทั้ง less file ได้โดยสั่งให้ compile file

echo $less->compileFile("input.less");

lessphp มี function ของการ cache ซึ่งมีผลดีต่อการโหลดของไซต์ เพราะจะได้ไม่ต้อง compile less ทุกครั้งเวลาที่โหลดไซต์ ถ้าไฟล์ less นั้นไม่มีการ update

$inputFile = "myfile.less";
$outputFile = "myfile.css";
$less = new lessc;
// create a new cache object, and compile
$cache = $less->cachedCompile($inputFile);
file_put_contents($outputFile, $cache["compiled"]);
// the next time we run, write only if it has updated
$last_updated = $cache["updated"];
$cache = $less->cachedCompile($cache);
if ($cache["updated"] > $last_updated) {
file_put_contents($outputFile, $cache["compiled"]);
}

หลังจากนั้นเราไป require compiler .php file ใน functions.php

require_once locate_template('/css/compiler_file.php');

include stylesheet ที่เรา compile ได้ไว้ใน head

link id="css" href="yourtemplatepath/css/output.css" rel="stylesheet" type="text/css"

เราก็จะได้ CSS file ที่ผ่านการ compile มาแล้ว โดยที่เราไม่ต้องไปนั่งเขียน CSS เองหลายๆบรรทัด

นอกจากนี้ LESS ยังสามารถรับค่าจาก options ต่างๆเพื่อมา compile ได้อีกด้วย โดย lessphp มี module ในการ parse variable

$less->setVariables(array(
         "color" => "blue",
         "size" => "14px"
       ));

echo $less->compile(".content { color: @color; font-size: @size; }")

แล้วถ้าเราต้องการจะ unsetVariables ก็สามารถ reset ค่าที่เคย set ไปได้เช่นกัน

$less->unsetVariables("color");

LESS สามารถที่จะใช้ @import เพื่อที่จะ import file เข้าไป เราสามารถที่จะกำหนด path ของ file ที่เราต้องการจะ import ได้

$less->setImportDir(array("assets/less/", "assets/bootstrap"));

echo $less->compile('@import "colors";');

จากตัวอย่างด้านบน กำหนดpath ที่เราต้องการ @import โดยจะ @import colors fileใน path assets/less/colors.less และ assets/bootstrap/colors.less

LESS ยังสามารถเขียน custom functions เพื่อให้ LESS compile โดยสามารถใช้ module ที่เรียกว่า

registerFunction and unregisterFunction

โดยมี 2 arguments คือ name และ callable value (callable value ก็คือ custom function ที่เรา register เข้ามา)

บทความนี้ เขียนจากความเข้าใจที่ศึกษามา และอยากจะแชร์ให้กับคนที่ต้องการศึกษาเกี่ยวกับเรื่องนี้ อาจจะไม่ครบถ้วน หรือหากมีข้อผิดพลาดใด ก็ขออภัยมา ณ ที่นี้ด้วยนะคะ 🙂
หากใครต้องการศึกษาเพิ่มเติม สามารถอ่านได้จาก References ข้างล่างนี้ได้เลยค่ะ

References: