สตริงใน SASS

บทความนี้อธิบายเกี่ยวกับสตริงใน SASS

เราจะอธิบายทีละขั้นตอน ตั้งแต่การใช้สตริงพื้นฐานไปจนถึงการใช้งานขั้นสูงใน SASS

YouTube Video

สตริงใน SASS

SASS เป็น preprocessor สำหรับขยาย CSS และสตริงเป็นองค์ประกอบสำคัญที่ช่วยให้การกำหนดสไตล์มีความยืดหยุ่นและไดนามิกมากยิ่งขึ้น

พื้นฐานของสตริง

สตริงใน SASS สามารถใส่เครื่องหมายคำพูดเดี่ยวหรือคู่ก็ได้ และบางกรณีสามารถละเครื่องหมายคำพูดเพื่อให้เหมือนตัวระบุ (identifier) ด้านล่างนี้คือตัวอย่างพื้นฐานในการเขียนสตริง

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

หมายเหตุ

• สตริงที่มีเครื่องหมายคำพูดจะถูกประมวลผลโดยตรงในฐานะค่าผกผันของสตริง (string literal)
• สตริงที่ไม่มีเครื่องหมายคำพูดมักจะถูกใช้เป็นตัวระบุของ CSS เช่น ชื่อคลาสหรือไอดี จึงควรระมัดระวังในการใช้งาน

การต่อสตริง

ใน SASS คุณสามารถต่อสตริงได้โดยใช้โอเปอเรเตอร์ +

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• โค้ดนี้คือตัวอย่างการใช้โอเปอเรเตอร์ + ใน SASS เพื่อต่อสตริงหลายอันให้เป็นสตริงใหม่

ตัวอย่างขั้นสูง: การสร้างชื่อคลาส

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• โค้ดนี้คือตัวอย่างการใช้โอเปอเรเตอร์ + ใน SASS เพื่อรวมชื่อคลาสหลักกับมอดิฟายเออร์ สร้างชื่อคลาสใหม่ขึ้นมา

การใช้ฟังก์ชันสตริง

SASS มีฟังก์ชันสำเร็จรูปที่สะดวกสำหรับการจัดการสตริง เช่น การควบคุมเครื่องหมายคำพูดหรือแยกสตริงย่อย

quote() และ unquote()

ด้วยฟังก์ชัน quote() และ unquote() คุณสามารถเพิ่มหรือลบเครื่องหมายคำพูดออกจากสตริง

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

ฟังก์ชัน str-length() ใช้สำหรับหาความยาวของสตริง

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

ฟังก์ชัน str-insert() ใช้สำหรับแทรกสตริงที่ตำแหน่งที่กำหนด

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

ฟังก์ชัน str-slice() ใช้สำหรับตัดเอาส่วนหนึ่งของสตริงออกมา

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() และ to-lower-case()

ฟังก์ชัน to-upper-case() และ to-lower-case() ใช้สำหรับแปลงสตริงให้เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กตามลำดับ

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

สตริงกับตรรกะเงื่อนไข

ด้วย directive @if ของ SASS คุณสามารถตรวจสอบค่าในสตริงและสลับรูปแบบ (style) ตามธีมหรือการตั้งค่าได้อย่างยืดหยุ่น

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• โค้ดนี้คือตัวอย่างการใช้ directive @if ใน SASS เพื่อตรวจสอบว่าธีมเป็น dark หรือไม่ แล้วสลับรูปแบบตามนั้น

ตัวอย่างการใช้งานจริง: การสร้างเส้นทางรูปพื้นหลังแบบไดนามิก

ด้านล่างนี้คือตัวอย่างการใช้การจัดการสตริงเพื่อสร้าง URL รูปพื้นหลัง

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

ผลลัพธ์หลังแปลง

1.background {
2    background-image: url("/images/background.jpg");
3}

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

การใช้งานร่วมกับ List และ Map

โดยผสมผสาน List และ Map กับการจัดการสตริงใน SASS คุณสามารถสร้างสไตล์ได้อย่างยืดหยุ่นมากขึ้น

ตัวอย่าง List

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

ผลลัพธ์หลังแปลง

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• โค้ดนี้เป็นตัวอย่างการใช้ directive @each ใน SASS เพื่อสร้างคลาสสำหรับแต่ละสถานะใน list และตั้งค่าภายในแบบไดนามิกโดยการต่อสตริง

ตัวอย่าง Map

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

ผลลัพธ์หลังแปลง

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• โค้ดนี้เป็นตัวอย่างการใช้ map ใน SASS เชื่อมโยงชื่อสีเข้ากับค่า แล้วสร้างคลาสแต่ละอันแบบไดนามิกด้วย directive @each

การ escape สตริง

เพื่อให้สามารถใช้สตริงบางชนิดเป็นตัวระบุ CSS ได้อย่างปลอดภัย อาจจำเป็นต้อง escape ตัวอักษรพิเศษ

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

ผลลัพธ์หลังแปลง

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• โค้ดนี้เป็นตัวอย่างของการนำสตริงที่มีอักขระพิเศษมาใช้เป็นตัวแปรใน SASS, ขยายค่าด้วย #{$variable} และนำไปใช้เป็นชื่อคลาสที่ถูกต้องใน CSS

สรุป

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

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

YouTube Video