พื้นฐานของ SASS

บทความนี้อธิบายพื้นฐานของ SASS

เราจะอธิบายฟีเจอร์พื้นฐานของ SASS อย่างละเอียดทีละขั้นตอน พร้อมแสดงตัวอย่างโค้ดการใช้งานจริง

YouTube Video

พื้นฐานของ SASS

SASS (Syntactically Awesome Stylesheets) เป็นภาษาสำหรับไฟล์สไตล์ชีทที่ขยายความสามารถของ CSS ด้วยการใช้ SASS คุณสามารถใช้ฟีเจอร์ขั้นสูงที่ CSS ไม่มีได้ เช่น ตัวแปร การซ้อนกันของโค้ด มิกซ์อิน และการสืบทอด สิ่งนี้ทำให้การจัดการและนำสไตล์ชีตกลับมาใช้ใหม่ง่ายขึ้นมาก

SASS คืออะไร?

SASS เป็นภาษาที่ช่วยให้งานเขียน CSS ง่ายขึ้น และทำให้การสไตลิ่งยืดหยุ่นและทรงพลังมากขึ้น SASS ยังมีไวยากรณ์ SCSS (Sassy CSS) ซึ่งมีความคล้ายคลึงกับไวยากรณ์ CSS มาตรฐาน ตัวอย่างดังนี้:

ตัวอย่าง SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

ตัวอย่าง CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

การติดตั้ง SASS

วิธีการติดตั้ง

เพื่อใช้ SASS ให้ติดตั้ง Node.js ก่อน จากนั้นติดตั้ง SASS ด้วยคำสั่งต่อไปนี้:

1npm install -g sass

วิธีการคอมไพล์

หากต้องการคอมไพล์ไฟล์ SASS (.scss หรือ .sass) ให้เป็น CSS ให้ใช้คำสั่งต่อไปนี้:

1sass input.scss output.css

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

ตัวแปร

SASS ให้คุณใช้ตัวแปรเพื่อเรียกใช้ค่าเดิม เช่น สี หรือขนาดตัวอักษร ได้อย่างสะดวก

โค้ดตัวอย่าง

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

• โค้ดนี้ใช้ตัวแปร SASS เพื่อกำหนดสีและฟอนต์ และนำมาใช้ซ้ำในตัวเลือก body เพื่อเพิ่มความคงที่และความง่ายในการดูแล

ผลลัพธ์ที่ได้จากการคอมไพล์

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

การซ้อน (Nesting)

SASS ช่วยเพิ่มความอ่านง่ายของโค้ดด้วยการอนุญาตให้ซ้อน CSS selectors ได้

โค้ดตัวอย่าง

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

• โค้ดนี้ใช้โครงสร้างซ้อนกันเพื่อแสดงโครงสร้างของสไตล์ให้ชัดเจน

ผลลัพธ์ที่ได้จากการคอมไพล์

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

มิกซ์อิน (Mixins)

Mixins ช่วยให้คุณนำโค้ดกลับมาใช้ซ้ำในหลายๆ selector

โค้ดตัวอย่าง

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

• โค้ดนี้กำหนดสไตล์ border-radius โดยใช้ @mixin และนำไปใช้ซ้ำกับ button และ .card ด้วย @include ทำให้จัดการสไตล์ได้อย่างมีประสิทธิภาพโดยไม่ซ้ำซ้อน

ผลลัพธ์ที่ได้จากการคอมไพล์

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

อินเฮอริแทนซ์ (@extend)

การสืบทอด (Inheritance) ช่วยให้คุณใช้สไตล์ที่มีอยู่กับ selector อื่นๆ ได้

โค้ดตัวอย่าง

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

• โค้ดนี้กำหนด placeholder selector %button-style และใช้ @extend เพื่อใช้สไตล์ร่วมกันกับทั้ง button และ .link-button ส่งเสริมการนำกลับมาใช้ใหม่และความเป็นอันหนึ่งอันเดียวกัน

ผลลัพธ์ที่ได้จากการคอมไพล์

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

การใช้เงื่อนไขและลูป

SASS รองรับเงื่อนไขและลูป เพื่อสร้างสไตล์แบบไดนามิก

ตัวอย่างการใช้คำสั่งเงื่อนไข

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

• โค้ดนี้ใช้ฟังก์ชัน if ของ SASS เพื่อเปลี่ยนสีพื้นหลังและตัวอักษรตามค่า $theme ช่วยให้สร้างสไตล์แบบไดนามิกตามเงื่อนไขได้

ตัวอย่างการใช้ลูป

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

• โค้ดนี้ใช้ลูป @for ของ SASS เพื่อสร้างคลาส .column-1 ถึง .column-3 แบบไดนามิก

ผลลัพธ์ที่ได้จากการคอมไพล์

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

การแยกไฟล์และนำเข้าไฟล์

SASS อนุญาตให้แบ่งไฟล์และนำกลับมาใช้ใหม่โดยใช้ @use หรือ @import

โครงสร้างไฟล์

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

ผลลัพธ์ที่ได้จากการคอมไพล์

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

สรุป

การใช้ SASS ช่วยให้การเขียน CSS ง่ายขึ้น และเพิ่มความสามารถในการนำโค้ดไปใช้ซ้ำ รวมถึงความง่ายในการดูแลรักษาโค้ด

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

YouTube Video