สอนเขียน SASS แบบมือใหม่ ตอนที่ 3 – หัดเขียน SASS กับความสามารถต่าง ๆ

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

  1. การใช้งานตัวแปร – Variable
  2. การสร้างลดความซับซ้อนด้วยลำดับขั้น – Nesting
  3. การทำงานร่วมกับไฟล์อื่น ๆ – Import
  4. การเขียนลักษณะฟังก์ชั่น – Mixin

ถ้าเพื่อน ๆ ศึกษาทั้ง 4 ข้อนี้แล้วเพื่อน ๆ จะสามารถเขียน CSS ที่ยุ่งยากวุ่นวายได้ง่ายขึ้นครับ อีกทั้งการบริหารจัดการ Source code นั้นจะเป็นระเบียบ ทำให้การพัฒนาเว็บไซต์ของเราเป็นไปได้อย่างรวดเร็วครับ ว่าแล้วเราก็ไปลุยเป็นข้อ ๆ เลยดีกว่าครับ

การใช้งานตัวแปร – Variable

ในการใช้งานตัวแปรนั้นก็เหมือนกับการเขียนโปรแกรมทั่ว ๆ ไปเลยครับ เราสามารถเก็บค่าสี เก็บค่าความกว้าง โดยค่าที่เราเก็บยังสามารถนำมาผ่านกระบวณการทางคณิตศาสต์ได้ด้วย เช่น การ บวก ลบ คูณ หาร เป็นต้นครับ เรื่องของตัวแปรนี้จะมีประโยชน์มาก เช่น ถ้าเรามีการกำหนดค่าสนของเว็บไซต์เป็นสีแดงแล้วเราต้องการเปลี่ยนเป็นสีเหลือง เราก็ทำได้ง่าย ๆ เพียงไปแก้ที่ตัวแปร ไม่จำเป็นต้องไปไล่แก้ CSS ทั้งหมดครับ วิธีการเขียนตัวแปรก็ง่ายมากเลยครับ เราจะเริ่มต้นด้วยเครื่อง $ แล้วตามด้วยชื่อตัวแปรครับ

การเขียนแบบ .sass

การเขียนแบบ .scss

สังเกตุนะครับว่าไม่จำเป็นต้องมีเครื่องหมาย ; หรือถ้าเพื่อน ๆ อยากจะใส่เข้าไปก็ได้ครับ เพราะ SASS ดูจากการขึ้นบรรทัดใหม่นั้นเองครับ ผมว่าเพื่อน ๆ คงเห็นความแตกต่างของ .sass และ .scss แล้วนะครับ ต่อไปผมจะเขียนตัวอย่างแค่ .sass นะครับ

การสร้างลดความซับซ้อนด้วยลำดับขั้น – Nesting

หลังจากที่เราลองเขียนการใช้งานแบบ Variable ไปแล้ว เพื่อน ๆ คงจะสังเกตุได้แล้วว่าในการเขียน .sass นั้นจะมองเรื่องของการ Indent เป็นหลักนะครับ ซึ่งบรรทัดไหนที่มีการ Indent มากกว่าจะเป็นข้อมูลย่อยของตัวที่ Indent น้อยกว่าครับ

และสำหรับ .scss นั้นจะใช้การเปิด/ปิด ปีกกาเข้ามาช่วยครับ เหมือนกับการเขียน css ทั่ว ๆ ไปเลยครับ เพียงแต่มันจะมีความพิเศษก็คือ เราสามารถใส่ตัวย่อยเท่าไปเท่าไหร่ก็ได้ครับ

เพื่อน ๆ ก็ลองเลือกกันดูนะครับว่าจะเขียน .sass หรือ .scss ครับ แต่ว่าถ้าเลือกแบบไหนแล้วก็ต้องเขียนแบบนั้นทั้ง project นะครับ ผมจำได้ว่าเหมือนจะเขียน .sass สลับกับ .scss ไม่ได้ครับ

การทำงานร่วมกับไฟล์อื่น ๆ – Import

ในการทำงานที่มีขนาดใหญ่ ๆ การแยกไฟล์เป็นวิธีหนึ่งในการจัดการโครงสร้างของโครงการ ซึ่ง SASS เองได้มีการอำนวยความสะดวกในส่วนนี้เช่นกัน โดยเราสามารถแยกไฟล์ไว้ตาม Folder ต่าง ๆ แล้วค่อย Import มาใช้ได้ เช่น

unit/_all.sass
unit/_font.sass
unit/_variable.sass
style.sass

จากตัวอย่างผมจะให้ไฟล์ style.sass เป็นไฟล์หลัก เราก็สามารถ import ไฟล์ _all.sass เข้ามา แล้วให้ไฟล์ _all.sass import ตัว _font.sass และ _variable.sass อีกทีก็ได้ครับ สังเกตุนะครับว่าไฟล์ไหนที่เราจะให้ถูก import จะขึ้นต้นด้วย _ เพราะ SASS จะเข้าใจได้ทันทีว่าเป็นไฟล์ที่ใช้ในการ Import ครับ

ตัวอย่างการ import เข้ามาที่ style.sass เพียงแค่บรรทัดเดียวเองครับ และเราไม่จำเป็นต้องใส่เครื่อง _ นำหน้าชื่อไฟล์นะครับ เพราะ SASS เค้ารู้ได้เองครับ และหลังจากเรา import แล้วเราก็สามารถเขียนส่วนอื่น ๆ ต่อไปได้เลยครับ เห็นไหมครับว่าการจัดการไฟล์ผ่าน SASS นั้นง่ายมาก ทำให้โครงสร้างงานของเราดูเป็นระบบระเบียบขึ้นมาก ทีนี้ก็อยู่ที่การเรียกใช้ของเพื่อน ๆ แล้วหล่ะครับว่าจะทำได้ดีแค่ไหน

การเขียนลักษณะฟังก์ชั่น – Mixin

การเขียนในแบบของฟังก์ชั่น หรือ Mixin นั้นอาจจะยากสักหน่อยสำหรับสายออกแบบ เพราะการเขียนจะคล้าย ๆ กับการเขียน function ในโปรแกรมต่าง ๆ เลยครับ โดยเหมาะกับการนำมาใช้กับส่วนที่มีการเขียนบ่อย ๆ เช่น การเขียน Media queries ที่ต้องระบุของของหน้าจอขนาดน้อยกว่า 768px เราจะเขียนว่า @media (min-width: 768px) เห็นไหมครับว่าเขียนยาวมาก ๆ และเราต้องเขียนบ่อย ๆ มากครับ ดังนั้นการทำอะไรที่เรียกบ่อย ๆ เราจะใช้ Mixin ครับ

ตรงนี้เพื่อน ๆ ต้องทำความเข้าใจสักหน่อยนะครับชื่อ mixin เรากำหนดได้โดยการพิมพ์ชื่อหลังจาก @mixin เวลาเรานำไปใช้เราก็พิมพ์ชื่อ tablet ได้เลยครับ ในส่วนของ @content คือการนำเอาข้อมูลย่อยบริเวณที่เรียกใช้ Mixin มาแสดงครับ อาจจะยากซักหน่อยครับแต่ถ้าใช้เป็นจะช่วยเราได้มากครับ ยิ่งถ้าเราทำเว็บไซต์แบบ Responsive รับรองได้ใช้งานแน่ ๆ ครับ

บทความนี้เป็นบทความสุดท้ายในเรื่องการพัฒนา CSS ด้วยการใช้ SASS นะครับ อย่างไรหากมีข้อสงสัยสามารถแสดงความคิดเห็นทิ้งไว้ได้เลยครับ สำหรับใครที่เห็นว่าผมใส่เนื้อหาผิดตรงไหนก็แจ้งผมได้เช่นกันนะครับ สวัสดีชาวนักพัฒนาเว็บไซต์

April 20, 2017