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

การ 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/

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

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

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

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

ปัญหาที่เกิดจากการใช้งาน Facebook PHP SDK ในการทำ Facebook Login

จากบทความก่อนๆ ที่ผมเคยแนะนำการการใช้งาน Facebook PHP SDK ในการทำ Facebook Login สำหรับการแก้ไขปัญหา Chrome ไม่รองรับ Facebook Javascript SDK ซึ่งสามารถใช้งานได้ปกติ โดยการสับขาหลอกของตัวผมเอง หลายๆ ท่านที่เข้ามาอาจจะลองก๊อปโค้ดไปแปะ แล้วปรากฎว่ามันไม่เห็นจะทำงานได้จริง

เนื่องจากปัญหาที่เกิดขึ้นจาก error นี้
"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request"


การติดตั้ง Google Analytics ด้วย Google Tag Manager

สำหรับสายงานโปรแกรมเมอร์นั้น ไม่ค่อยมีปัญหามากนักเวลาที่จะต้องแก้ไข หรือเปลี่ยน UA โค๊ดของ Analytics เพราะสามารถทำได้เอง แต่ก็นะ ถึงแม้ว่าจะง่ายแต่ในเวลาที่ไม่สะดวกจริงๆ แถมงานที่ทำส่วนใหญ่ต้องอัพผ่าน Git การจะทำอะไรแบบนั้นก็ไม่ไช่เรื่องง่ายอีกต่อไป