Sass หรือ Scss มันใช้ยังไง

Sass หรือ Scss มันใช้ยังไง
( Version scss watch)

เรามี stylesheet อย่างเจ้า CSS มานานนแล้วครับ จนกระทั้งปัจจุบันมียัน CSS3 กันเลยทีเดียว แต่แค่นั้นยังไม่พอ ยังจะมีคนทำให้เราจัดแต่งหน้าตาเว็บ ให้ง่ายกว่าเดิมเข้าไปอีก ( ง่ายขึ้นจริงมั้ย เนี้ย = = ) นั่นคือเหล่า Less (เป็นยังไงไปหาอ่านเอาเองนะ ผมเคยอ่านผ่าน ๆ ไม่เคยใช้จริง) แล้วก็มาถึงเจ้า Sass หรือ Scss ( ต่างกันยังไงก็ไปหาอ่านเอาเองอีกเช่นกัน ) เอาละคราวนี้ ผมจะมาสอนว่า มันใช้ยังไง

ผมขอข้ามขั้นตอนการ installation ออกไปนะครับ ใครยังไม่ติดตั้ง ทำตามLink นี้เลย http://sass-lang.com/

ผมจะบอกก่อนว่า ผมจะใช้ Command Line เอานะ เนื่องจาก จำครั้งเดียวใช้ได้ทุก OS ส่วนใครสนใจการใช้ Software ช่วย compile ก็ตามที่ ทาง http://sass-lang.com/ แนะนำเลยครับ

Tools ที่ Sass-lang แนะนำครับ

คราวนี้มาดู โครงสร้าง project นะครับ

ไฟล์ index ผมเป็นแบบนี้

<!DOCTYPE html>
<html>
 <head>
   <meta charset=”utf-8">
   <title></title>
 </head>
 <body>
   <div class=”one”>
     <div class=”a”></div>
     <div class=”b”></div>
     <div class=”one-z”></div>
   </div>

   <div class=”two”>
     <div class=”a”></div>
     <div class=”b”></div>
   </div>

  <div class=”three”>
    <div class=”a”></div>
    <div class=”b”></div>
  </div>
 </body>
</html>

แล้วไฟล์ scss ของผมก็โล่งๆ เลยครับ

จากนั้นเราต้องทำการ run ตัว compile scss กัน โดย run command ดังนี้ครับ

$ scss -- watch scss_dir:css_dir/

อธิบายก็คือ ให้ทำการ compile scss ทุกครั้งที่มีการแก้ไข file ใน directory scss_dir ไปยัง css_dir เสมอ

เราสามารถระบุไฟล์ ด้วยได้ครับ เช่น

$ scss -- watch scss_dir/style.scss:css_dir/style.css

** ซึ่งในกรณีของผม ผมจะ compile ทั้ง directory scss ไปยัง directory css เลย **

เมื่อ run command scss แล้วจะได้ผลประมาณนี้ครับ (ให้สังเกต บรรทัดสีเขียว นะครับ)

จะเห็นว่า scss มีการสร้างไฟล์ style.css ใน directory css_dir ให้ผมทันที เรามาดูผลจากการ compile กัน

อย่างที่เห็นครับว่า จะเป็น css แบบโล่งๆ และมีชื่อเดียวกันกับ file scss เราเลย [style.scss] และจะมี comment บอกเราว่าเป็นไฟล์ที่เกิดจากการ mapping นั่นเอง

จากนั่นผมก็มาแก้ไขไฟล์ index.html ให้ไป เรียกใช้ css จาก style.css นะครับก็เพิ่ม code ดังนี้ครับ

<head>
...
<link rel=”stylesheet” href=”/css/style.css”>
...
</head>

คราวนี้ เรามาลองเขียน scss กันเลย ผมจะเขียนแบบ ใช้คุณสมบัติบางอย่างของ scss นะครับ (อยากให้ไปลองใช้ที่เหลือกันเอง)

ผมใช้คุณสมบัติ Operation ของ Scss ในการกำหนด ความกว้างและความสูงของ div.one นะครับ โดยคุณสมบัตินึงของ Variables ใน scss คือการใช้สมการครับ จึงเห็นได้ว่า ผมกำหนด ความกว้างไว้ที่ 400px แต่ความสูงผมใช้ ความกว้างที่มีอยู่ มาหักลบ 100px

แล้วผลการ compile ละ ?

แล้วใน terminal ของเราจะ compile เป็นอย่างไร

ผมแก้ไข รัวๆ ก็เลยเป็นอย่างทราเห็นครับ

ครับคราวนี้ถ้าผมมี file scss อีกไฟล์นึงละ ?

จะสังเกตเห็นว่า scss ได้ compile ไฟล์ basestyle.scss เป็น basestyle.css ใน css_dir ให้ผมด้วย เท่ากับว่าเราจะมี file css ตามจำนวน scss

ละเมื่อผมทำการ import basestyle เข้าไปให้แก่ style.scss

ผลการ compile จึงเป็น

แต่หาก ต้องการให้ file scss นั้น ๆ เป็นเพียงแค่ตัวไฟล์สำหรับ import เท่านั้นไม่ต้องการให้สร้างไฟล์ ใหม่ใน css ให้เราทำการใส่ underscoll นำหน้าชื่อครับ

ก็จะได้แบบนี้

ผมใส่ underscoll นำหน้าชื่อไฟล์ไว้ ทำให้ ใน directory css_dir ไม่มี file _hidestyle.css

จากนั่นผมก็ ทำการ import เข้าไปใน style.scss

ผลที่ได้ก็จะเป็นแบบนี้ครับ

ถ้าถามว่า แล้วมันมีประโยชน์อะไร กับการระบุ underscoll ผมคิดว่าน่าจะเป็นพวกชุด css ไว้สำหรับเก็บ parameter อย่างเดียวไม่จำเป็นต้อง compile ออกมาเป็น .css อะไรพวกนี้

ยังไงก็ลองไปใช้กันดูนะครับ

ขอขอบคุณเนื้อหาดีๆๆจาก

Chaloemphon Thipkasorn

Credit:https://medium.com/@chaloemphonthipkasorn/sass-%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD-scss-%E0%B8%A1%E0%B8%B1%E0%B8%99%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%A2%E0%B8%B1%E0%B8%87%E0%B9%84%E0%B8%87-version-scss-watch-7561182131a8

รวบรวมข้อมูลสาระต่างๆของIT

ค้นหาบล็อกนี้