Sass คืออะไร? + สอนวิธีเขียนแบบเข้าใจง่าย

sass

ทุกวันนี้คงจะไม่มีใครปฏิเสธความสามารถของ CSS Preprocessor อย่าง Sass ได้แล้ว แต่ถ้าใครยังไม่เคยได้ลองใช้มัน หรือเคยลองใช้บ้างแล้วแต่ยังไม่ค่อยคุ้นเคยกับมัน  บทความนี้จะช่วยอธิบายถึงพื้นฐานการใช้งานที่จะช่วยให้เราจะสามารถดึงความสามารถของ Sass ออกมาใช้ให้ได้มากที่สุด

  • Sass มี feature ต่างๆ ที่จะช่วยเพิ่มความสามารถให้กับการเขียน CSS ของเรา ไม่ว่าจะเป็น Nesting, Variables, Mixins และ Operators
  • Nesting – เราสามารถเขียน CSS Selector แบบซ้อนกันได้ เพื่อความสะดวกในการไล่โค้ด
  • Variables – เราสามารถสร้างตัวแปรขึ้นมา เพื่อนำค่านั้นไปใช้ต่อในส่วนอื่นๆ ได้
  • Mixins – เราสามารถเก็บ CSS Declaration เอาไว้เป็นชุดๆ เพื่อนำไปใช้ต่อในส่วนอื่นๆ ได้
  • Operators – เราสามารถใช้เครื่องหมายทางคณิตศาสตร์ในการคำนวณค่าต่างๆ ได้

CSS Preprocessor คืออะไร ?

การจะใช้ CSS Preprocessor นั้น เราจะเขียน CSS ในอีกรูปแบบหนึ่งก่อน จากนั้นเราจะให้ตัว CSS Preprocessor ทำหน้าที่แปลงโค้ดนั้นให้กลับมาเป็นโค้ด CSS แบบปกติ แล้วถึงจะนำโค้ดที่ได้มาไปใช้จริง

แล้วจะทำแบบนั้นไปเพื่ออะไร ?

เพราะการเขียน CSS ในรูปแบบใหม่นี้เอง ที่ทำให้เราสามารถทำอะไรได้หลายๆ อย่าง ที่ลำพังตัว CSS เองนั้นไม่สามารถทำได้ ไม่ว่าจะเป็น

  • Nestingสามารถเขียน CSS Selector แบบซ้อนกันได้ เพื่อความสะดวกในการไล่โค้ด
  • Variablesสามารถสร้างตัวแปรขึ้นมา เพื่อนำค่าไปใช้ต่อในส่วนอื่นๆ ได้
  • Mixinsสามารถเก็บ CSS Declaration ไว้เป็นชุดๆ เพื่อนำไปใช้ต่อในส่วนอื่นๆ ได้
  • Operatorsสามารถใช้เครื่องหมายทางคณิตศาสตร์ในการคำนวณได้

วิธีติดตั้ง Sass

หากยังไม่ค่อยเห็นภาพ ขอแนะนำให้ลองเล่นเลยดีกว่า เริ่มจากการติดตั้ง Sass ตามวิธีที่อธิบายไว้ใน Official Website ก่อน แต่ถ้าเราไม่ค่อยถนัด command-line ก็ให้เปลี่ยนมาใช้ tool สำเร็จรูปอย่าง Prepros เลยก็ได้(เพื่อให้ง่ายต่อการอธิบาย บทความนี้จะขอใช้ Prepros) เพียงเท่านี้เราก็พร้อมที่จะใช้งาน Sass แล้ว

prepros

Screenshot ของ Prepros ที่เราจะใช้ในการเขียน ​Sass

รู้จักกับ Syntax ของ Sass

การเขียน CSS ด้วย Sass นั้น มี syntax อยู่ 2  แบบ ด้วยกัน ดังนี้

  • Sass (.sass)คล้ายกับการเขียน CSS แบบปกติ แต่จะไม่รองรับเครื่องหมายปีกกา จึงต้องมีย่อหน้าในการเขียน CSS Declaration เสมอ
  • SCSS (.scss)เหมือนกับการเขียนด้วย CSS แบบปกติเลย (ซึ่งในบทความนี้จะขอเลือกใช้ syntax แบบนี้)

เนื่องจากการเขียน syntax แบบ SCSS นั้น เหมือนกับการเขียน CSS แบบปกติเลย(แต่จะมีฟีเจอร์ของ Sass เพิ่มเข้ามา) เราจึงสามารถเปลี่ยนนามสกุลของไฟล์ CSS เดิมของเรา จาก .css มาเป็น .scss ได้ทันที หรือเราจะสร้างไฟล์เปล่าๆ ขึ้นมาใหม่ แล้วกำหนดนามสกุลให้เป็น .scss ก็ได้

ลองใช้ Prepros

เพื่อความสะดวก เราจะใช้ Prepros ในการ compile ไฟล์ .scss ให้เป็น .css แต่ก่อนอื่น ให้เราสร้าง 2 โฟลเดอร์นี้ ขึ้นมาก่อน

  • scssเก็บไฟล์ .scss (เราจะเขียน Sass ที่ไฟล์เหล่านี้ ไม่ยุ่งกับไฟล์ .css แล้ว)
  • cssเก็บไฟล์ .css ของเราที่ได้หลังจาก compile ด้วย Prepros แล้ว (ไฟล์เหล่านี้จะถูกนำไปใช้จริงที่ production)

ทีนี้เราจะมาลอง compile ดู ให้เราลากโฟลเดอร์ที่เก็บงานของเรา(ที่ข้างในมีโฟลเดอร์ scss และ css) ไปวางใน Prepros เพียงเท่านี้ เวลาเรามีการแก้ไฟล์ .scss ในโฟลเดอร์ scss Prepros ก็จะ compile ไฟล์เหล่านั้นให้กลายเป็น .css แล้วเซฟลงไปในโฟลเดอร์ css ให้โดยอัตโนมัติ เราอาจลองเปิดไฟล์ .scss ขึ้นมาสักอัน แล้วลองกดเซฟดู ถ้าการ compile เรียบร้อย เราก็จะเห็นไฟล์ .css เพิ่มเข้ามาในโฟลเดอร์ css

prepros siamhtml

ลาก folder งานของเราไปวางบน Prepros เพื่อให้มัน compile ไฟล์ scss ให้เป็น css โดยอัตโนมัติ

เริ่มลงมือเขียน Sass กันเลย !

เมื่อทุกอย่างพร้อมแล้ว ให้เราเข้าไปในโฟลเดอร์ scss แล้วลองสร้างไฟล์ .scss เปล่าๆ ขึ้นมาสักอัน เรากำลังจะเริ่มเขียน ​Sass แล้ว!

1. ลองใช้ Nested selectors

Nested selectors คือการเขียน selector ซ้อนๆ กัน เพื่อให้อ่านได้ง่ายขึ้นและสะดวกในการไล่โค้ด  ลองดูตัวอย่างโค้ดต่อไปนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

อย่างไรก็ตาม การใช้ Nested selectors ก็มีข้อเสียเหมือนกัน หากเราซ้อน selector กันมากๆ แบบนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

จะเห็นว่าโค้ด CSS ที่ได้มานั้น ไม่ค่อยเหมาะสมเท่าไรนัก ทั้งในเรื่องของ performance ที่แย่ และยังลดความเป็น CSS ลงอีกด้วย (เฉพาะเจาะจงเกินไป)

วิธีที่เหมาะสมกว่าคือการจำกัดการซ้อนกันของ selector ให้ไม่เกิน 3-4 ชั้น จากตัวอย่างเดิม เราอาจเปลี่ยนมาเขียนแบบนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

จะสังเกตว่าโค้ด CSS ที่ได้มาใหม่นั้น ลดการใช้ descendant selector ไปเยอะมาก ซึ่งจะส่งผลดีในแง่ของ performance และยังช่วยให้ CSS Rule เหล่านั้นไม่เจาะจงจนเกินไปนัก

2. กำหนดค่าที่ใช้บ่อยๆ ให้เป็น Variables

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

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

แต่ถ้าวันหนึ่ง ลูกค้าอยากให้เราเปลี่ยนสีของลิ้งค์มาเป็นสีแดง เราจะต้องทำอย่างไร ?

จะเห็นว่าเราต้องแก้ถึง 2 จุดด้วยกัน ซึ่งจริงๆ แล้ว เราควรแก้แค่เพียงค่าของตัวแปรเท่านั้น ที่เป็นเช่นนี้ก็เพราะว่าเราตั้งชื่อตัวแปรไม่เหมาะสมมาตั้งแต่แรกแล้วนั่นเอง วิธีแก้ปัญหาก็คือ ให้เราตั้งชื่อตัวแปรโดยดูจาก “หน้าที่” ของมัน มันมีไว้ทำอะไรก็ให้เอามาตั้งเป็นชื่อตัวแปรเลย จากตัวอย่างเดิม เราก็จะได้ชื่อตัวแปรใหม่แบบนี้

เพียงเท่านี้ หากมีการแก้สีอีก เราก็จะแก้แค่ที่ค่าของตัวแปรที่เดียว ไม่ต้องมายุ่งกับชื่อตัวแปรอีกแล้ว

3. จัดกลุ่ม CSS Declaration เพื่อใช้ซ้ำด้วย Mixins

Mixins นั้น จะคล้ายๆ กับ Variables เลย เพียงแต่มันจะเก็บเป็นกลุ่มของ CSS Declaration แทน ไม่ได้เก็บเพียงแค่ค่าเพียงค่าเดียวเหมือนกับ Variables และที่สำคัญก็คือ เราสามารถส่งค่าบางอย่างเพื่อเอาไปใช้ภายใน Mixin ได้อีกด้วย

ตัวอย่างของการใช้ Mixin ที่เห็นประโยชน์ชัดๆ ก็คงจะเป็นการใช้ในการเขียน CSS3 ที่เรามักจะต้องใส่ vendor prefix เอาไว้ด้วยเสมอ แบบนี้

เพื่อให้การเขียน border-radius สะดวกมากขึ้น ให้เราสร้าง Mixin ขึ้นมาทำหน้าที่นี้โดยเฉพาะไปเลยจะดีกว่า

จากโค้ดด้านบน เราจะใช้ @mixin ในการสร้าง Mixin ขึ้นมาใหม่ และใช้ @include ในการเรียกใช้ Mixin ที่เราสร้างขึ้นมา จะสังเกตว่าตอนที่เราเรียกใช้ Mixin นั้น เราสามารถส่งค่าที่ต้องการจะให้ Mixin เอาไปใช้ได้ด้วย หรือเราอาจจะกำหนดค่า default ไว้เลยก็ได้ ลองดูตัวอย่างนี้

นอกจากนั้น เรายังสามารถทำการคำนวณ(+, -, *, /, %) โดยใช้ Sass ได้ด้วย ลองดู Mixin ต่อไปนี้

Mixin ด้านบนนี้ จะใช้สำหรับจัดตำแหน่งให้อยู่กึ่งกลาง โดยเราจะต้องส่งค่า width และ height ของ element ที่ต้องการจะจัดตำแหน่งให้กับ Mixin นำไปหาร 2 แล้วเอาค่าที่ได้ไปเป็น margin เพื่อทำให้ element นั้น อยู่กึ่งกลาง เมื่อลอง compile ดู เราก็จะได้โค้ด CSS หน้าตาแบบนี้

หากสังเกตดีๆ จะเห็นว่านอกจาก Mixin จะช่วยให้เขียนโค้ดได้เร็วขึ้นแล้ว มันยังช่วยลดข้อผิดพลาดของเราได้อีกด้วย ลองนึกดูว่าหากเรามี Mixin ดีๆ ไว้ใช้เต็มไปหมด เราจะเขียนโค้ดได้สะดวกมากขึ้นแค่ไหน ต้องขอขอบคุณ tool ดีๆ อย่าง Compass ที่ได้รวบรวม Mixin ที่เป็นประโยชน์มาให้เราใช้กันแบบฟรีๆ ส่วนวิธีใช้ Compass นั้นก็ไม่ยากเลย เพียงแค่เรา import มันเข้ามาก็พร้อมใช้งานในทันที เนื่องจาก Prepros ได้ติดตั้ง Compass มาให้เราตั้งแต่แรกแล้วนั่นเอง

เราสามารถเข้าไปดู Mixin ที่ Compass เตรียมมาให้ทั้งหมดได้ที่ Compass CSS3

compass

Compass รวบรวม Mixin ที่เป็นประโยชน์มาให้เราใช้กันแบบฟรีๆ

4. แชร์สไตล์ร่วมกันด้วย Extend

Extend นั้นจะคล้ายๆ กับ Mixin เพียงแต่มันจะไม่สามารถรับค่าอะไรได้เลย สมมติว่าเรามีกล่อง alert อยู่ 4 แบบ ด้วยกัน ดังนี้

สังเกตว่า class alert เฉยๆ จะเป็นการ alert แบบกลางๆ(Notice) แต่ถ้าเป็นการ alert นอกเหนือจากนี้(Success, Warning และ Error) เราจะเติม suffix เข้าไปต่อท้าย จากโค้ด html ด้านบน เราสามารถนำ Extend มาช่วยทำให้โค้ดสั้นลงได้ ลองดูตัวอย่างนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

หากสังเกตุที่โค้ดดีๆ จะพบความต่างอีกอย่างระหว่าง Extend กับ Mixin ตรงที่การใช้ Extend นั้นโค้ดที่ได้จะสั้นกว่าเนื่องจากมันจะรวม selector ที่ใช้สไตล์เหมือนกันเอาไว้ใน CSS Rule อันเดียวกันเลย ในขณะที่การใช้ Mixin นั้นจะเป็นเหมือนการคัดลอกกลุ่มของสไตล์แล้วเอามาวางตามจุดที่มีการเรียกใช้ ความแตกต่างตรงนี้เอง ที่ทำให้เราสามารถสรุปได้ว่า เราจะใช้ Mixin ก็ต่อเมื่อเราจำเป็นที่จะต้องส่ง “ค่าบางอย่าง” เข้าไปให้ Mixin เท่านั้น(เช่น ขนาดของ radius) แต่ถ้าไม่จำเป็นต้องส่งค่า ก็ให้เราเปลี่ยนมาใช้ Extend แทน

นอกจาก Extend จะสามารถใช้กับ class selector ได้แล้ว เรายังสามารถใช้กับ placeholder selector ได้อีกด้วย โดย placeholder selector นั้นจะคล้ายกับ class selector เลย เพียงแต่เราจะต้องเปลี่ยนจาก “.” มาเป็น “%” เท่านั้นเอง ลองมาดูตัวอย่างต่อไปนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

เราจะเห็นว่าการใช้ placeholder selector นั้น ต่างจากการใช้ class selector ตรงที่ตัว placeholder selector เองจะไม่แสดงออกมาในโค้ดหลัง compile

ถึงแม้ว่าการใช้ Extend นั้นจะสามารถลดความซ้ำซ้อนของโค้ดเราได้เป็นอย่างดี อย่างไรก็ตาม การใช้ Extend นั้นจะต้องทำด้วยความระมัดระวัง ลองดูตัวอย่างต่อไปนี้

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

หากสังเกตโค้ดหลัง compile ดีๆ จะพบว่า Sass นั้น ไป Extend ทุกๆ .widget เลย ซึ่งรวมไปถึง .sidebar .widget ด้วย สาเหตุที่ Sass ต้องทำแบบนี้ก็เพื่อต้องการให้ .widget-latest-news ที่อยู่ใน sidebar มีพื้นหลังสีเทาไปด้วยซึ่งมันก็สมเหตุสมผลอยู่แล้ว แต่หากพิจารณาจากโค้ด มันก็ออกจะดูเยอะกว่าที่เราคิดไว้ ลองนึกดูเล่นๆ ว่า หากเรามีการเขียน .widget ไว้อีกหลายๆ ที่ แล้วเราไป Extend มา โค้ดจะออกมาเยอะแค่ไหน

นอกจากนั้น การใช้ Extend ยังมีข้อจำกัดตรงที่เราไม่สามารถใช้ข้าม @media rule ได้ ลองดูตัวอย่างนี้

เมื่อนำโค้ดด้านบนไป compile แล้ว Sass ก็จะบอกว่ามี Error สาเหตุที่ Sass ไม่สามารถ compile การเขียน Extend แบบนี้ได้ ก็เพราะว่าการ Extend นั้น จะรวบ selector ทั้งหมดที่แชร์สไตล์ร่วมกันไว้ใน CSS Rule เพียงอันเดียว นั่นหมายความว่าบาง CSS Rule ที่เคยอยู่ใน @media rule กลับต้องออกมาอยู่ข้างนอก @media rule ซึ่งมันไม่สมเหตุสมผล

ด้วยข้อจำกัดของการใช้ Extend เหล่านี้เอง เราอาจลดการใช้ Extend ให้เหลือน้อยที่สุด แล้วเปลี่ยนมาใช้วิธีเพิ่ม class ที่ต้องการจะ Extend ไปที่ตัว html element แทน ลองดูตัวอย่างนี้

เมื่อเราเพิ่ม class alert เข้าไปแล้ว เราก็ไม่จำเป็นต้องไป Extend มันอีก

จะเห็นว่าวิธีเพิ่ม class นี้ สามารลดการใช้ Extend ลงได้ ถึงแม้ว่ามันอาจจะไปทำให้โค้ด html มีขนาดใหญ่ขึ้นก็จริง แต่มันก็ช่วยลดความซับซ้อนของ CSS Rule หลังการ compile ได้มากพอสมควรเลยทีเดียว

5. แนวทางในการเขียน Sass

มาถึงตอนนี้ เราก็พอจะเขียน Sass เป็นแล้ว ถึงแม้ว่าการเขียน Sass จะไม่มีหลักตายตัว แต่เพื่อที่จะทำให้การมาไล่โค้ดในภายหลังทำได้สะดวก เราก็อาจเขียนโดยเรียงลำดับตามนี้

  • Extendเราจะได้รู้ก่อนเลยว่า selector นี้ ใช้สไตล์ร่วมกับ selector ไหน
  • ทั่วไปจากนั้นให้ใส่สไตล์ของ selector นั้น เหมือนกับการเขียน CSS ตามปกติ
  • Mixinตามมาด้วย Mixin
  • Nested selectorปิดท้ายด้วย Nested selector

เพื่อให้เห็นภาพมากขึ้น ลองมาดูตัวอย่างนี้

จะเห็นว่าการเขียนโดยยึดหลักดังกล่าว จะช่วยให้เราอ่านโค้ดเข้าใจได้เร็วขึ้น การเอา Extend ไว้ด้านบน ทำให้เราพอจะเดาได้คร่าวๆ ว่า element ที่ตรงกับ selector นี้จะมีหน้าตาเป็นอย่างไร ส่วนสาเหตุที่ต้องเอาสไตล์ทั่วๆ ไป มาคั่นก่อนจะใส่ Mixin ก็เพื่อจะได้แยก Mixin ออกจาก Extend ได้ง่ายๆ นั่นเอง และการใส่ Nested selector เอาไว้ท้ายสุดก็เพื่อเป็นการบอกว่าสไตล์ทั้งหมดของ selector หลักนั้นหมดแล้ว

6. แยกไฟล์ Sass ตามประเภทการใช้งาน

สุดท้ายแล้ว การใช้ Sass นั้น เราไม่จำเป็นต้องเขียนโค้ดทั้งหมดลงในไฟล์ๆ เดียว แต่เราควรแยกเขียนเป็นไฟล์ย่อยๆ แล้วใช้ @import ในการรวมให้เป็นไฟล์เดียวกันหลังจากที่ compile แล้ว เพื่อความสะดวกในการจัดการโค้ด เราอาจจัดโครงสร้างของไฟล์ scss ให้เป็นแบบนี้

หมายเหตุ: โครงสร้างไฟล์ของการเขียน Sass นั้น ไม่มีรูปแบบที่ตายตัว เราสามารถนำไปปรับเพื่อให้เหมาะสมกับ scale ของงาน

จากโครงสร้างด้านบน เราจะเห็นว่าที่ root มีไฟล์ main.scss อยู่เพียงไฟล์เดียวเท่านั้น ส่วนไฟล์ scss อื่นๆ จะถูกแยกอยู่ตาม folder ต่างๆ ตามลักษณะการใช้งาน สังเกตว่าเราจะต้องใส่ “_” เอาไว้ข้างหน้าชื่อไฟล์เหล่านั้นด้วย เพื่อเป็นการบอก Sass ว่ามันคือ “Partial” ไม่ต้องไป compile ออกมาเป็น .css นะ เพราะยังไงเราก็จะให้ไฟล์ scss หลักของเรา ไป import ไฟล์เหล่านั้นมาอยู่แล้ว เวลา compile เราก็จะได้ไฟล์ main.css มาเพียงแค่ไฟล์เดียว ลองมาดูตัวอย่างโค้ด import ต่อไปนี้

จากโค้ดของไฟล์ main.scss จะเห็นว่าเวลาที่เราใช้ @import นั้น เราไม่ต้องใส่ “_” ที่ชื่อ Partial แต่อย่างใด นอกจากนั้น เรายังควร import ไฟล์ scss ของ vendors มาเป็นลำดับแรกเสมอ แล้วค่อยตามด้วยไฟล์จาก frameworks และ themes ตามลำดับ ทั้งนี้ก็เพราะว่าเราจะได้สามารถ override สไตล์จาก vendors ด้วยสไตล์ที่เราเขียนขึ้นมาเองได้นั่นเอง

บทสรุปการใช้ ​Sass

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

(Visited 18,846 times, 11 visits today)

12 Responses to “Sass คืออะไร? + สอนวิธีเขียนแบบเข้าใจง่าย”

  1. Supakit Thanomboonchareon says:

    เว็บสวยและบทความอ่านง่ายดีครับ

  2. Nateetorn Sanprasert says:

    โอ้วมึนตึบ

  3. Rattapon Saksoong says:

    โอ้วเกทเรื่องไฟล์แปลกๆที่มึนๆอยู่เลยครับ ขอบคุณมากๆครับ ^ ^

  4. Ao Noiam says:

    ขอบคุณครับ อธิบายได้เยี่ยมมากๆ

  5. แจ่ม ขอบคุณครับ :)

  6. ขอบคุณครับ

  7. Prepros ต้องเสียตังค์เพื่อใช้คุณสมบัติของ sass แล้ว และทางเลือกสำหรับ windows อย่าง scout ก็ไม่สามารถใช้ร่วมกับ mixin library ได้

  8. ลองใช้ gulp.js แทนดูมั้ยครับ น่าจะทดแทนกันได้ครับ ^_^
    http://www.siamhtml.com/introduction-to-gulp-js/

  9. ผมเคยสงสัยมานาน ตอนเขียน css ว่า ทำไมเราต้องเขียนโค้ดซ้ำๆ(โดยเฉพาะเรื่อง Nest) สุดท้าย sass จัดให้ตามที่ผมต้องการแล้ว 5555

  10. Melody Mew says:

    ขอบคุณสำหรับบทความดีๆคร้า

  11. ใส่ภาพยังไง ผมใส่ตามพี่แล้วไม่เห็นภาพออกมาเลย

  12. .alert {
    @extends %align-center;
    width: 100%;
    background: yellow;
    @include border-radius;
    .icon {
    float: left;
    }
    }

    @extends -> @extend ตัด s ออกครับ

Leave a Reply to Ao Noiam