ก่อนจะมาเป็น CSS preprocessor เค้าเขียน CSS กับ PHP กันมาก่อน

ทุกวันนี้เราคงชินกับคำว่า CSS preprocessor  หรือพวก Less และ Sass กันไปแล้ว มันเป็นเรื่องของการเขียนตัวแปรเก็บค่าแล้วนำไปใช้กับ CSS หรือแม้แต่การเขียน function เพื่อใช้ใน CSS นั้นเองครับ

ภาพประกอบ before css

 

บทความนี้จะออกแนวประวัติศาสตร์ไปหน่อย เพราะตอนนี้คงไม่มีใครใช้วิธีเขียนแบบนี้แล้ว แต่จะเป็นการเล่าให้ฟังว่าเมื่อสมัยก่อนมีการเขียน Code CSS ร่วมกันกับ PHP อยู่ด้วยเหมือนกัน

เมื่อสมัยก่อนอาจจะไม่ได้มีการใช้งาน function กันเต็ฒรูปแบบเหมือนที่เขียน CSS preprocessor แบบทุกวันนี้ แต่น่าจะใช้เพื่อให้ลดทอนการเขียน Code และการนำกลับมาใช้ใหม่ได้เร็วขึ้นมากกว่า

แล้วตอนนั้นใช้ PHP แสดงผลกับ CSS ได้อย่างไร ?
คือการเขียน PHP แสดงผลกับ CSS ตรงๆนั้นมันทำไม่ได้อยู่แล้วครับ แต่เวลาสร้างไฟล์ให้สร้างเป็นไฟล์ PHP แทนไปเลย แล้วส่วนที่เรียกเข้ามาแทนที่จะ include กันตรงๆเข้าใช้วิธีเรียกแบบ CSS เลยครับ

 <link rel="stylesheet" href="css/supercharged.php" media="screen">

ที่เห็นบ่อยๆในการหยิบเอา PHP มาเติมความสามารถให้กับ CSS นั้นคงเป็นเรื่องของการเก็บค่าตัวแปรแล้วนำไปใช้กับ property ของ CSS แบบนี้ครับ

<?php
$primaryTextColor = '#000';
$secondaryTextColor = '#fff';
$primaryBGColor = '#fff';
$secondaryBGColor = '#ccc';
?>
body {
 color: <? echo $primaryTextColor?>;
 background: <? echo $primaryBGColor?>;
}
div#content {
 background: <? echo $secondaryBGColor?>;
 color: <? echo $secondaryTextColor?>;
}

เค้าจะสร้างตัวแปรเอาไว้เป็นส่วนของ PHP แล้วพอถึง CSS ก็แค่ให้มัน echo ค่านั้นๆออกมาแบบนี้เองครับ

หรือถ้าจะเก็บข้อมลในลักษณะเป็นชุดๆข้อมูล เราก็สามารถใช้ Array มาเก็บค่าได้

<?php
$defaultCSS = array(
 'color01' => '#000',
 'color02' => '#fff',
 'color03' => '#ccc',
 'color04' => '#555',
 'baseTextSize' => '10'
);
?>
body {
 color: <? echo $defaultCSS['color01']?>;
 background: <? echo $defaultCSS['color02']?>;
 font-size: <? echo $defaultCSS['baseTextSize']?>px;
}

ลักษณะแบบนี้นะครับ คือแน่นอนว่ามันไม่ได้ดีเท่ากับการเขียนแบบ CSS preprocessor แต่อย่างใด ผมเพียงแค่นำมายกตัวอย่างให้ดูว่าในสมัยก่อนๆเค้าก็เคยเขียนแบบนี้กันนะ

 

 

 

โฆษณา Theme WordPress สำหรับ Wedding งานแต่ง