SCSS ตอนที่ 3 มารู้จัก SCSS กันสักหน่อย พอไปวัดไปวาได้

# SCSS ตอนที่ 3 --- ## content ในตอนนี้ที่เราจะพูดถึงกันนะครับ - @import นำเข้าไฟล์ - การเขียนคอมเม้น - รูปแบบการเขียน - selector ซ้อน selector - & กับการต่อคำ - @extend รวม selector - %selector ต้นแบบ css ล่องหน --- SCSS นั่นเราสามารถ เขียนโค๊ตส่วนต่างๆ แยกเป็นไฟล์แล้วนำมารวมกันตอนใช้งานได้ เพื่อให้ง่ายต่อการแก้ไขและจัดกลุ่ม ตัวอย่างเช่น - //ไฟล์ _setting.scss - @import 'setting'; - //ไฟล์ _run.scss .ในโฟลเดอร์ mixin - @import>@import 'mixin/run'; --- การตั้งชื่อไฟล์นำหน้าด้วย _ นั้น จะทำให้ไฟล์นั้นไม่ทำการสร้างไฟล์ .css ขึ้นมา และตอนนำมา @import ก็ไม่จำเป็นต้องใส่ _ นำหน้า และนามสกุลไฟล์ แต่อย่างได --- ==การนำเข้าไฟล์ทีเดียวทั้งโฟล์เดอร์== --- SCSS นั้นไม่สามารถนำเข้าไฟล์แบบใช้ mixin/* แทนการนำเข้าทีเดียวยกโฟล์เดอร์ได้ เราจึงแก้โดย สร้างไฟล์ ที่ @import ไฟล์ทั้งหมดไว้ด้วยกัน เพื่อให้ง่ายต่อการนำเข้าไฟล์ แค่เนี่ย ?!! เยส สั้นๆพอ :+1: --- ==การเขียนคอมเม้น== --- การเขียนคอมเม้นใน SCSS นั้นใช้ได้2แบบคือ * // เพื่อบอกว่าข้อความหลังจากนี้คือ คอมเม้น * /* ..... */ สำหรับการคอมเม้นหลายบรรทัด แบบเดียวกับใน CSS --- ==รูปแบบการเขียน== --- รูปแบบการเขียนของ SCSS นั้น คล้ายกับ CSS คือ เริ่มต้นด้วย selector เนื้อหาใน selector ถูกครอบด้วย { } แล้วปิดชุดคำสั่ง css ด้วย ; แบบเดียวกับเขียน css (SASS นั้นจะไม่มี {} และ ; แต่ใช้การขึ้นบรรทัดใหม่แทน) ```css= .foo { display: block; overflow: hidden; padding: 0 1em; } ``` --- ==selector ซ้อน selector== --- นอกจากการเขียนแบบปกติแล้วเรายังซามารถซ้อน selector แบบนี้ ```css= .foo { .bar1{ display: block; overflow: hidden; } div{ padding: 0 1em; } } ``` --- เราก็จะได้ผลลัพ แบบนี้ ```css= .foo .bar1 { display: block; overflow: hidden; } .foo div { padding: 0 1em; } ``` --- ==& กับการต่อคำ== --- ในการซ้อน selector เราสามารถใช้สัญลักษณ์ & ร่วมด้วย โดยใช้แทนข้อความชื่อของ selector ก่อนหน้า ตัวอย่างเช่น ```css= .foo { background-color: azure; &-1{ display: block; overflow: hidden; } &-red{ color: red; } } ``` --- เราก็จะได้ผลลัพ แบบนี้ ```css= .foo { background-color: azure; } .foo-1 { display: block; overflow: hidden; } .foo-red { color: red; } ``` --- การใช้ & ร่วมด้วย ทำให้ง่ายต่อการเขียน css แบบกลุ่มหรือที่ต้องใช้คำขึ้นต้นซ้ำๆ เท่าที่ทดลอง & ต้องอยู่หน้าสุดเสมอ(ถ้าวางไว้หลังได้ด้วยก็คงดี -0-) --- ==@extend รวม selector== --- @extend ใช้สำหรับเพิ่ม selector ให้กับต้นแบบ css ที่เราเตรียมไว้ อย่างเช่น เราต้องการ css แบบนี้ ```css= .foo, .foo-1, .foo-2, .foo-3 { position: relative; } .foo-1 { width: 100%; } .foo-2 { width: 50%; } .foo-3 { width: 25%; } ``` --- เราสามารถเขียนได้ด้วย ```css= .foo { position: relative; &-1{ @extend .foo; width: 100%; } &-2{ @extend .foo; width: 50%; } &-3{ @extend .foo; width: 25%; } } ``` --- เอ๊ะ ทำไมดุมันยุ่งยากขึ้นละ?? ตอนแรกผมก็มองว่าแบบนั้นแหละ แต่พอตอนใช้จริง เราก็จะเอามันมาใช้ร่วมกับ Loop หรือใช้ในการจัดรูปแบบโค๊ตให้อ่านง่ายขึ้น ลงท้ายเลยเป็นตัวนึงที่สำคัญมากเลยทีเดียว --- ==%selector ต้นแบบ css ล่องหน== --- การสร้างต้นแบบ css นั้น ถ้าใช้ใช้เป็น selector ปกติ มันก็จะแสดงในไฟล์ .css ของเราด้วย ถูกไหมครับ แล้วถ้าเราไม่ต้องการให้มันแสดงละจะทำยังไง เช่นโค๊ตข้างบน ถ้าเราไม่ต้องการ .foo --- เราต้องการแค่ ```css= .foo-1, .foo-2, .foo-3 { position: relative; } ``` --- การเรียกใช้ @extend จำเป็นต้องอ้างชื่อ selector เพียงเราใช้ %selector แทน selector ปกติ ก็ใช้ได้แล้วละครับ ตัวอย่างเช่น ```css= %bar{ position: relative; } .foo { &-1{ @extend %bar; width: 100%; } &-2{ @extend %bar; width: 50%; } &-3{ @extend %bar; width: 25%; } } ``` --- ผลที่ได้คือ ```css= .foo-1, .foo-2, .foo-3 { position: relative; } .foo-1 { width: 100%; } .foo-2 { width: 50%; } .foo-3 { width: 25%; } ``` --- ==ตอนต่อไปพบกับ การใช้งาน Loop ต่างๆ== ==THE END== ---