ข้ามไปที่เนื้อหาหลัก

การ Configuration สำหรับการแสดง Output ในรูปแบบต่างของ Compass


เป็นที่ทราบกันดีว่า Compass คือ CSS framework ตัวหนึ่งที่รองรับการเขียน CSS สไตล์โปรแกรมมิ่งอย่าง SASS ได้อีกทั้งยังมีออพชันมากมายให้เลือกใช้ รวมไปถึง Bootstrap ด้วย เพราะมันสะดวกสบายแบบนั้น ทำไมล่ะ? ทำไมเราถึงจะไม่ใช้มัน

วันนี้เลยอยากจะมาแนะนำวิธีการตั้งค่าการแสดงผล CSS หลังจากที่มันแปลงค่าจากไฟล์ .SCSS มาให้ ในส่วนนี้จะไม่ได้พูดถึงขั้นตอนการติดตั้ง สามารถเข้าไปดูขั้นตอนการติดตั้ง SASS ได้ที่นี่ และขั้นตอนการติดตั้ง Compass ได้ที่นี่

ซึ่งปกติถ้าเราไม่ได้ทำอะไรเลยหลังจากที่สร้างโปรเจ็ค หน้าตา Output ที่ได้ก็จะมีหน้าตาประมาณนี้


หน้าตาก็จะรกๆ ดูไม่ค่อยเหมือน CSS ในแบบที่เราอยากได้เท่าไหร่ ซึ่งความจริงแล้ว Compass สามารถตั้งค่าการแปลงโค้ดให้สวยได้ โดยไปแก้ไขไฟล์ config.rb โดยแก้ไขตามนี้



จะเห็นว่าจากภาพเอาคอมเม้นออกจากบรรทัดคำสั่ง line_comments โดยให้ตั้งค่าเป็น False ไป ก็จะทำให้การแปลงไฟล์ครั้งต่อไปไม่แสดงคอมเม้นต์บรรทัดติดมาด้วย แต่บางครั้งมันก็ไม่ทำงานบ้าง ให้ลองกำหนดค่าเป็นศูนย์แทน สำหรับใครที่กำหนดเป็น False แล้วมันไม่ได้ผล 


ผลลัพทธ์ที่ได้ก็จะมีหน้าตาสวยงาม สะอาดสะอ้านเชียว แนะนำว่าทุกครั้งที่ตั้งค่าอะไรก็แล้วแต่ให้เรา Compile SASS ใหม่ทุกครั้ง รวมไปถึงลบโฟลเดอร์ sass.cache ด้วยในกรณีที่ยังไม่เปลี่ยนการแสดงผลลัพธ์ หรือ ลบไฟล์ .css ที่แปลงไปได้ด้วยก็ดี

สุดท้ายลูกเล่นที่ผมอยากแนะนำ แต่อาจจะไม่ค่อยได้ใช้ คือ การบีบอัด css ที่เราเขียนให้เป็นในรูปแบบ minify Compass นั้นสามารถทำได้โดยการกำหนด output_style ให้เป็นโหมด :compressed

output_style = :compressed


ทำการ Compile ใหม่ผลลัพธ์ก็จะออกมาเป็นแบบบีบอัดทันที วันนี้ก็เอาทริปเล็กๆ น้อยๆ มาฝากช่วงคิดงานไม่ออกนะครับ ได้หรือไม่ได้อย่างไรคอมเม้น ทิ้งไว้เดี๋ยวผมจะกลับมาตอบนะครับ :D ขอบคุณที่ติดตามกันนะครับ

แหล่งข้อมูล
http://compass-style.org/help/tutorials/configuration-reference/
http://www.johnbhartley.com/2013/compass-wont-compress-sass-to-css/

โพสต์ยอดนิยมจากบล็อกนี้

การเพิ่ม Font ภาษาไทยอื่นๆ เข้าไปใช้งานใน MPDF

เนื่องมาจากผมได้มีโอกาสจับงานที่ต้องแปลงหน้าเว็บให้เป็น PDF ลองๆ หาข้อมูลก็ไปเจอเจ้าตัวนี้ MPDF ซึ่งจริงๆ แล้วก็มีให้ใช้งานอีกหลายๆ ตัว สาเหตุที่เลือกใช้งานตัวนี้เพราะมัน ค่อนข้างจะติดตั้ง และใช้งานง่าย และยังสามารถอ้างอิง CSS เข้ามาช่วยจัดหน้าตาใน PDF ได้อีกด้วย ซึ่งผลที่ได้เพี้ยนไปจากตัวจริงไม่มากครับ แต่ที่ทำให้เลือกใช้งานเพราะการเพิ่มฟ้อนท์ภาษาไทย เข้าไปนั้นค่อนข้างง่ายครับ เลยจะขอมาแนะนำดังนี้

มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ

มีช่วงหนึงผมเคยนำ datatable มาพัฒนาในงานแต่เกิดปัญหาเนื่องจากมีข้อมูลขนาดใหญ่ ทำให้เกิดการโหลดในครั้งแรกที่โหลดหน้าเพจนั้นๆ เนื่องจากผมใช้ Ajax ในการโหลดข้อมูลทั้งหมดมาในครั้งเดียวด้วยจำนวนข้อมูล 1000 ขึ้น ซึ่งตอนนั้นผมคิดว่าการทำ preload น่าจะช่วยได้ แต่ว่าถ้า user เกิดเผลอไปกด refesh หรือแก้ไขข้อมูลเวลากลับมาที่หน้าข้อมูลก็ต้องโหลดใหม่อีก ทำให้ผมเลิกใช้ datatable ไปเลย เพราะคิดว่ามันคงไม่เหมาะ

แต่ในความจริงแล้ว datatable ก็ได้มีสิ่งที่มาแก้ในจุดนั้นได้ ซึ่งเรียกว่า server-side โดยการที่อนุญาตให้เรา query ข้อมูลออกมาก่อนแล้วส่งมาให้ datatable อ่านข้อมูลในจำนวนที่น้อยลง หลักการก็เหมือนๆ กับบทความการทำสร้าง XML จากข้อมูลขนาดใหญ่นั่นแหละครับ แต่มีเงื่อนไขเพียงแต่ว่า ต้อง Filter และส่งข้อมูลออกมาในรูปแบบที่ตรงตามหลักของ datatable เท่านั้น ( บางครั้งเวลาเข้าไปอ่าน Document หรือดู Example จะงงๆ ว่าอะไรเยอะแยะ ) โดยวันนี้จะมาแนะนำการใช้งานแบบง่ายๆ กันเลย :D

ปลดล็อคความสามารถให้กับ Sublime Text ตอนที่ 2

ความเดิมจากตอนที่แล้วสำหรับตอนที่ 2 นี้ ผมจะมาแนะนำ plugin ที่น่าใช้สำหรับ Web Development นะครับ ซึ่งความจริงแล้วก็มีให้เราเลือกเลือกใช้มากมาย สามารถ search google ได้ด้วยคำว่า "sublime popular package" ซึ่งทาง Sublime Text ได้จัดอันดับไว้ให้เราด้วย สามารถเข้าไปเลือกดู เลือกโหลดกันตามใขชอบเลยครับ แต่ผมจะมาขอแนะนำ ตัวที่คิดว่าลงแล้วใช้งานได้จริงแน่ๆ มาฝากกันครับ