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

# SCSS ตอนที่ 2 --- ## content ในตอนนี้ที่เราจะพูดถึงกันนะครับ - การประกาศตัวแปรของ SCSS - ชนิดตัวแปรของ SCSS ($variables) - String - Number - ColorList Array - Map --- ==การประกาศตัวแปรของ SCSS== - การประกาศตัวแปรใน SCSS นั้น ใช้ ==$== นำหน้าชื่อตัวแปร (a-zA-Z0-9_- ผมก็ไม่มั่นใจนะ ใช้อักษรอื่นได้มากน้อยแค่ไหน ) - ค่าของตัวแปร อยู่หลัง ==:== - ดังตัวอย่าง --> `$variable: 'init value';` --- ==ตัวแปรของ SCSS ($variables)== ตัวแปรใน SCSS นั้น ค่อนข้าง อิสระ มันอิสระยังไงเดี๋ยวมาดูกัน --- ==ชนิดตัวแปร ข้อความ Strings== $direction1: 'left'; $direction2: left; --- ตัวแปร $direction 1 และ 2 นั้น เป็นข้อความทั้งคู่ ดังนั้น การจะใส่ =="== หรือ =='== หรือไม่ใส่ นั้นก็ดูที่ความเหมาะสมของการใช้งาน ซึ่งในบางครั้งอาจมีปัญหาได้ --- ==ชนิดตัวแปร ตัวเลข Numbers== ตัวแปรตัวเลขนั้น นอกจากจำนวนเต็มบวก เต็มลบ หรือพวก จุดทศนิยม + - แล้ว ยังมี UNITS ตัวเลขผสมหน่วย เช่น 5px 1em 25rem เป็นต้น อ้าว แล้วแบบนี้มันจะเอามาคำนวนได้หรอ??? --- ==การคำนวณ== --- ในการคำวานปกตินั้น เราคงไม่มีปัญหาอะไร แต่กับพวกที่มีหน่วยละ ?? ในการคำนวนตัวเลขที่มีหน่วย หรือ ยูนิท นั้น ถ้าใช้ ยูนิต กับ ตัวเลขปกติ จะได้ผลลัพพ์เป็น ยูนิตหน่วยนั้นๆ --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> หากใช้ ยูนิต กับ ยูนิต ผลจะออกมาเป็น หน่วยของ ยูนิตตัวแรก เช่น - <code class="blue">margin: (6px + 15in);</code> - <code class="orange">padding: ( 15in + 6px);</code> จะได้ - <code class="blue">margin: 1446px;</code> - <code class="orange">padding: 15.0625in;</code> แต่บางตัวก็ไม่ได้นะ เช่น 6px + 15em ผลออกมาก็จะ ตูมม กลายเป็นโกโก้ครั้น --- ==ชนิดตัวแปร สี Colors== --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> เราสามารถเก็บสีต่างๆได้โดยตรง เช่น - <code class="blue">$color1: rgba(0,0,0,0.1);</code> - <code class="orange">$color2: white;</code> --- ==ชนิดตัวแปร Lists หรือ Array== --- ตัวแปร Array ใน scss จะอยู่ในรูปแบบนี้ ```css= $font-stack: ('Helvetica', 'Arial', sans-serif); ``` แต่ถึงจะไม่มี , หรือ ( ) ก็ยังเป็น Array ที่ใช้ได้นะ เห็นไหมตัวแปรมันให้อิสระเราสูงขนาดไหน --- การเพิ่มค่าใน Array นอกจากเพิ่มแบบตรงๆ ยังใช้พวกคำสั่ง เช่น append( ) ได้เช่นกัน ดูพวกคำสั่งต่างๆ เพิ่มเติมได้ที่ [SASS Function](http://sass-lang.com/documentation/Sass/Script/Functions.html) --- ==ชนิดตัวแปร Maps== --- Maps ก็เหมือนกับ Array แต่มีค่าเป็น key:values การดึง ค่า ออกมาจาก Array หรือ Maps นั้นออกจะวุ่นวายไปนิด คือต้องใช้ Loop หรือ ฟังก์ชั่น ช่วยในการดึงค่า เดี๋ยวจะแยกออกเป็น Ep ใหม่ให้ดูต่างหากนะครับ ตอนนี้สามารถดูพวกคำสั่งต่างๆ ได้ที่ [SASS Function](http://sass-lang.com/documentation/Sass/Script/Functions.html) --- จบตอนที่ 2 [ >> ตอนที่ 3](https://hackmd.io/@UKzvUDqaSgyvoBvj0MfI6A/rykcS-yII) ---