Skip to main content
เทคโนโลยี

Sass และ Scss 101

By กรกฎาคม 17th, 2020No Comments

Developer Team
BorntoDev Co., Ltd.

เชื่อว่าทุกคนไม่ว่าใครก็ต้องเคยผ่านการใช้งาน CSS กันมาแล้วทั้งนั้น ไม่ว่าจะเป็นวิชาคอมพิวเตอร์ตอนสมัยอยู่มัธยม หรือใครที่รู้จักเว็บไซต์ก็ต้องต้องรู้จัก CSS และเมื่อรู้จักกับสิ่งนี้ก็ย่อมรู้ว่า เวลาเราเขียน CSS เนี่ยไฟล์ที่ออกมามันทั้งยืดยาว และถ้าเราต้องการคุมโทนหรือจัดวาง Layout ให้หน้าเว็บเราเป็นไปตามที่เราต้องการเนี่ย มันจะต้องใช้ค่าเดิมๆซ้ำๆ โดยที่ไม่มีตัวแปรให้ใช้ วันนี้เลยจะมาแนะนำเครื่องมือที่ช่วยทำให้เราเขียน CSS ได้สนุกมากยิ่งขึ้นเหมือนการเขียนโปรแกรมภาษาอื่นๆเลยล่ะ นั่นก็คือ Sass และ Scss นั่นเอง!

Sass และ Scss คืออะไร?

เจ้าสองสิ่งนี้ที่จริงก็คืออย่างเดียวกัน คือเป็นการเขียน CSS รูปแบบหนึ่งซึ่งเมื่อเราเขียนตามแบบ Sass หรือ Scss เราจะเซฟเป็นไฟล์สกุล .Sass/.Scss แล้วทำการ compile ออกมาให้อยู่ในรูปของ CSS เพื่อนำไปใช้ได้ตามปกติ ซึ่งการเขียน Sass, Scss นั้นสไตล์การเขียนจะแตกต่างกัน โดย Scss ที่เกิดมาทีหลังหลักๆแล้วจะมีการเพิ่ม Syntax การใช้เครื่องหมาย { } เพื่อให้การเขียนดูอ่านง่ายยิ่งขึ้น

หลายคนอ่านมาถึงตรงนี้ก็คงรู้สึกว่า ต้องแปลงไฟล์อะไรด้วยเหรอ? ถ้ามันยุ่งยากขนาดนี้ไปใช้ CSS ธรรมดาดีกว่ามั้ย?

จริงๆมันไม่ได้ยากขนาดนั้นนะ!

 แต่ถ้าไม่ลองแล้วจะเสียใจนะ😢

วิธีติดตั้ง Sass และ Scss

การติดตั้งแล้วใช้งานนั้นมีได้หลายวิธีตาม link นี้ : https://sass-lang.com/install

โดยเราจะหยิบการติดตั้งโดยใช้ Node.js มาเป็นตัวอย่าง ดังนั้นเราจะต้องติดตั้ง Node ก่อน : https://nodejs.org/en/

จากนั้นให้เราเปิด terminal ขึ้นมา(ในที่นี้ใช้ผ่าน VScode https://code.visualstudio.com/) แล้วพิมพ์คำสั่งด้านล่างซึ่งจะเป็นการติดตั้งทั้ง Sass และ Scss แล้วรอโหลดซักหน่อยก็เป็นอันเรียบร้อย

npm install -g sass

เริ่มต้นการเขียนได้!

ให้เราลองสร้างไฟล์ .scss ขึ้นมาก่อน(ถ้าใครอยากใช้ Sass ก็ให้สร้างชื่อไฟล์เป็นสกุล .sass) จากนั้นถ้าเราต้องการ compile ไฟล์ .scss ของเราก็เพียงแค่ใช้คำสั่งตามรูปแบบนี้

sass ไฟล์scss ไฟล์cssที่ต้องการสร้างใหม่

การเขียนจริงก็จะเป็นแบบนี้

sass scss/sassTest.scss css/cssTest.css

กดรัน, เท่านี้ก็ compile ออกมาเป็นไฟล์ css แล้ว ไม่ยากใช่มั้ยล่ะ

ตัวอย่างการใช้งาน (Scss)

จาก https://sass-lang.com/guide

การใช้ตัวแปร

Sass และ Scss มีสิ่อำนวยความสะดวกให้เราเขียน css ได้สนุกและง่ายมากขึ้นเช่นการประกาศตัวแปรได้

.scss

$text-color: #FFCC00;

body {
  color: $text-color;
}

จากโค้ดเราสร้างตัวแปร $text-color ที่เก็บค่า #FFCC00 ไว้จากนั้น property ส่วนที่เราต้องการใช้ค่านั้น(property color ใน body) เราก็ใส่ตัวแปรนั้นลงไปได้เลย

จากนั้นก็ compile ซึ่งอีกวิธีในการ compile คือ sass  –watch ซึ่งมันจะคอยดูความเปลี่ยนแปลงของไฟล์ .scss แล้วทำการแก้ไขไฟล์ .css ให้ทันทีหรือถ้ามี syntax error ก็จะแจ้งด้วย

sass --watch scss/sassTest.scss css/cssTest.css
ตัวอย่างเมื่อมี error

ตัวอย่างเมื่อมี error

ก็จะได้ไฟล์ css ชื่อ cssTest.css ที่มีโค้ดหน้าตาปกติทั่วไปเอาไปใช้ได้เลย

.css

body {
  color: #FFCC00;
}

การเขียน CSS ของ element ที่ซ้อนกัน

หรือถ้าเราอยากเขียน css สำหรับ element ที่ซ้อนกัน ปกติเราจะต้องเขียนชื่อ parent element ตามด้วย child element แล้วกำหนด property css ถ้าอยากทำเพิ่มอีกก็ประกาศแบบเดิมซ้ำไปอีกแบบนี้

.css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

ด้วย Scss เราสามารถเขียนให้ซ้อนเข้าไปได้แบบนี้

.scss

nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }

Mixins

หรือแม้แต่การเซตค่าให้ property หลายๆตัวด้วยคำสั่งเดียวผ่าน @mixin ที่การทำงานคล้ายฟังก์ชันก็ยังทำได้

.scss

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  .box { @include transform(rotate(30deg)); }

.css

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Operator

จุดนี้เป็นจุดที่ชอบมากๆในการใช้ Sass และ Scss เพราะตอนที่เราประกาศ property เราสามารถใส่สมการคณิตศาสตร์ลงไปได้เลย ไม่ต้องใส่ตัวเลขแค่ตัวเดียวเหมือน CSS ตอนที่กลับมาดูโค้ดเราก็จะได้รู้ว่าตัวเลขนี้ๆเราเอามายังไงกันนะ ที่ใส่ width: 62.5% มีที่มาแบบนี้นี่เอง

.scss

.container {
  width: 100%;
}
 
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
 
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

.css

.container {
  width: 100%;
}
 
article[role=main] {
  float: left;
  width: 62.5%;
}
 
aside[role=complementary] {
  float: right;
  width: 31.25%;
}

ทั้งหมดนี้เป็นแค่ตัวอย่างการใช้งาน Sass, Scss เท่านั้นนะ แต่แค่นี้ก็รู้สึกว่าน่าใช้มากๆแล้ว และนี่ยังไม่ใช่ความสามารถทั้งหมดของทั้ง 2 ตัวนะ เช่น เราอาจแยกไฟล์ sass/scss เป็นหลายๆไฟล์ แล้วเรียกค่าจากไฟล์อื่นมาใช้สร้าง property ใน css ได้ และพอ compile แล้วก็จะได้เป็นไฟล์ css ไฟล์เดียวที่เอาไปใช้ได้ทันที! ด้วยคำสั่ง @use ตามด้วยชื่อ patial file ที่ตั้งชื่อนำหน้าด้วยเครื่องหมาย _ เป็นต้น สำหรับคนที่ลองดูหรือลองใช้แล้วถูกใจหรืออยากลองใช้ Sass ดูบ้าง ก็สามารถไปดูความสามารถเพิ่มเติมได้ที่นี่เลย https://sass-lang.com/guide

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Leave a Reply

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า