ไวยากรณ์ของ SASS และ SCSS

บทความนี้อธิบายเกี่ยวกับไวยากรณ์ของ SASS และ SCSS

เราจะอธิบายความแตกต่างระหว่างไวยากรณ์ของ SASS และ SCSS อย่างละเอียด พร้อมตัวอย่างเพื่อให้คุณเข้าใจมากยิ่งขึ้น

YouTube Video

ไวยากรณ์ของ SASS และ SCSS

SASS เป็นภาษาสไตล์ชีตที่ออกแบบมาเพื่อขยายความสามารถของ CSS SASS มีไวยากรณ์อยู่สองแบบ คือ ไวยากรณ์ SASS และ ไวยากรณ์ SCSS

ภาพรวมของ SASS และ SCSS

ไวยากรณ์ SASS

ไวยากรณ์ของ SASS เขียนดังนี้:

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• ไวยากรณ์ที่ใช้การเยื้องแทนการใช้วงเล็บปีกกา {} หรือเครื่องหมายอัฒภาค ;
• ออกแบบมาเพื่อให้เขียนโค้ดได้กระชับและอ่านง่าย
• นามสกุลไฟล์คือ .sass

ไวยากรณ์ SCSS

ไวยากรณ์ของ SCSS เขียนดังนี้:

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• ไวยากรณ์ที่คล้ายกับ CSS โดยใช้วงเล็บปีกกา {} และเครื่องหมายอัฒภาค ;
• มีความเข้ากันได้สูงกับโค้ด CSS เดิม ทำให้สามารถแปลง CSS มาเป็นไฟล์ SCSS ได้โดยตรง
• นามสกุลไฟล์คือ .scss

ความแตกต่างหลักระหว่าง SASS และ SCSS

เกณฑ์การเลือก

การเลือกใช้อันใดขึ้นอยู่กับความต้องการของโปรเจกต์และทีม

• เมื่อไรควรเลือกไวยากรณ์ SASS

  • ไวยากรณ์ SASS ช่วยให้คุณเขียนโค้ดได้กระชับและสะอาดตา
  • หากทั้งทีมคุ้นเคยกับไวยากรณ์ SASS ก็เป็นตัวเลือกที่เหมาะสม

• เมื่อไรควรเลือกไวยากรณ์ SCSS

  • หากความเข้ากันได้กับ CSS สำคัญ และทีมส่วนใหญ่คุ้นเคยกับ CSS ไวยากรณ์ SCSS จะเหมาะสมกว่า

ข้อดีของ SASS และ SCSS

ข้อดีทั่วไปของไวยากรณ์ SASS และ SCSS มีดังต่อไปนี้:

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

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• โดยการใช้ตัวแปร คุณสามารถกำหนดสไตล์ในที่เดียวและนำกลับมาใช้ซ้ำในหลาย ๆ ที่ได้ การเปลี่ยนแปลงดีไซน์สามารถปรับใช้ได้ทั่วทั้งโปรเจกต์เพียงแค่เปลี่ยนค่าตัวแปร ช่วยให้ดูแลรักษาได้ง่ายขึ้น

2. มิกซ์อิน

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixin ช่วยให้คุณสามารถรวมกลุ่มสไตล์หรือโค้ดที่มี vendor-prefix ซึ่งใช้ซ้ำในหลายแห่ง และนำไปใช้งานได้อย่างยืดหยุ่นด้วย arguments สิ่งนี้ช่วยลดการเขียนโค้ดซ้ำและเพิ่มความสามารถในการดูแลรักษา

3. กฎการซ้อน

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• โดยการใช้การซ้อนกัน (nesting) คุณสามารถเขียนสไตล์ให้มีลำดับชั้นตามโครงสร้าง HTML ทำให้จัดกลุ่มกฎที่เกี่ยวข้องกันได้ง่ายขึ้น สิ่งนี้ช่วยเพิ่มทั้งความอ่านง่ายของโค้ดและความสามารถในการดูแลรักษา

4. การสืบทอด

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• โดยการใช้การสืบทอด (inheritance) คุณสามารถจัดกลุ่มและนำสไตล์ที่ใช้ร่วมกันกลับมาใช้ซ้ำได้ สิ่งนี้ช่วยลดการเขียนโค้ดซ้ำและรักษาดีไซน์ให้สม่ำเสมอ

สรุป

การเลือกใช้ SASS หรือ SCSS ขึ้นอยู่กับความชอบของนักพัฒนาและข้อกำหนดของโปรเจกต์

ไวยากรณ์ SASS เน้นความเรียบง่าย ส่วน SCSS เน้นความเข้ากันได้กับ CSS ทั้งสองไวยากรณ์มีความสามารถสูง และช่วยเพิ่มประสิทธิภาพในการเขียน CSS อย่างมาก

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video