ตัวดำเนินการใน SASS

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

เราจะอธิบายตัวดำเนินการใน SASS พร้อมตัวอย่างการใช้งานจริง

YouTube Video

ตัวดำเนินการใน SASS

ตัวดำเนินการของ SASS ประกอบด้วยการคำนวณตัวเลข การเปรียบเทียบ การดำเนินการทางตรรกะ และการจัดการสตริง

การคำนวณเลขคณิต (บวก ลบ คูณ หาร โมดูโล)

SASS รองรับการคำนวณเลขคณิตตามปกติ แต่การใช้ / ในการหารอาจสับสนกับ / ของ CSS จึงแนะนำให้ใช้ math.div() ตัวเลขสามารถมีหน่วย และการคำนวณสามารถทำได้เฉพาะหน่วยที่เข้ากันได้เท่านั้น

ตัวอย่างด้านล่างนี้แสดงให้เห็นการคำนวณทางคณิตศาสตร์อย่างง่ายและการใช้งานโมดูล math

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• โค้ดนี้เป็นตัวอย่างของการบวกและคูณโดยใช้หน่วย px และการหารด้วยฟังก์ชัน math.div()
• หน่วยที่เข้ากันไม่ได้ เช่น 10px + 2em จะทำให้เกิดข้อผิดพลาดหรือผลลัพธ์ที่ไม่คาดคิด ควรทำให้หน่วยตรงกัน หรือใช้ฟังก์ชัน unit() และ unitless()

การจัดการและการแปลงหน่วยโดยอัตโนมัติ

SASS จะจัดการตัวเลขที่มีหน่วย และกฎของหน่วยหลังการคำนวณจะเป็นไปตามกฎทั่วไปของฟิสิกส์ ตัวอย่างเช่น px/px จะกลายเป็นไม่มีหน่วย ควรระวังการจัดการหน่วยเมื่อใช้ฟังก์ชัน unit() หรือหลังจาก math.div()

ด้านล่างคือตัวอย่างการจัดการค่าที่มีและไม่มีหน่วย

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• การคูณค่าที่มีและไม่มีหน่วยจะทำงานตามคาด แต่ควรระวังหน่วยที่ได้ (หรือการไม่มีหน่วย) เมื่อทำการหาร

ตัวดำเนินการเปรียบเทียบ (==, !=, <, >, <=, >=)

SASS มีตัวดำเนินการเปรียบเทียบที่สามารถใช้กับเงื่อนไข (@if) และ mixins การเปรียบเทียบประเภทข้อมูลที่ซับซ้อน เช่น สีและลิสต์ จะมีกฎเฉพาะของตัวเอง โปรดทราบว่าการเปรียบเทียบสีจะแตกต่างกันขึ้นกับค่าสี

ด้านล่างคือตัวอย่างที่เปรียบเทียบตัวเลขสองค่ากับการแยกสไตล์

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• ตัวดำเนินการเปรียบเทียบสามารถรวมกับ @if เพื่อกฎสไตล์ที่ตอบสนองและมีเงื่อนไข

ปฏิบัติการทางตรรกะ (and, or, not)

SASS รองรับ and or และ not ใช้ and หรือ or เพื่อรวมเงื่อนไขหลายข้อเข้าด้วยกัน ลำดับความสำคัญและการประเมินค่าเงื่อนไขสามารถระบุได้ชัดเจนด้วยวงเล็บ

ด้านล่างคือตัวอย่างของการจัดการเงื่อนไขที่ซับซ้อนด้วยตัวดำเนินการเชิงตรรกะ

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

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

การจัดการสตริง — การเชื่อมและการแทรกค่า

ใน SASS การเชื่อมสตริงทำได้ด้วย + หรือการแทรกค่า #{} ผลลัพธ์การใช้ + ขึ้นกับว่าสตริงฝั่งซ้ายมีเครื่องหมายคำพูดหรือไม่ ดังนั้นการใช้ #{} เพื่อแทรกค่าจะปลอดภัยกว่ามาก

ด้านล่างคือตัวอย่างของการเชื่อมและการแทรกค่าสตริง

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• การใช้การแทรกค่า #{} จะช่วยหลีกเลี่ยงปัญหาเกี่ยวกับเครื่องหมายคำพูดและช่องว่างที่ไม่ตั้งใจ

การคำนวณสี (เลิกใช้แล้ว)

ในอดีต SASS รองรับ 'color arithmetic' ซึ่งอนุญาตให้คุณบวกหรือหักค่าตัวเลขกับสีได้ อย่างไรก็ตามในปัจจุบันฟีเจอร์นี้ถูกยกเลิกแล้ว คุณควรใช้ฟังก์ชันจากโมดูล sass:color เพื่อจัดการกับสีแทน

ด้านล่างเป็นตัวอย่างที่แสดงว่าการคำนวณสีโดยตรงถูกเลิกใช้แล้ว และแนะนำทางเลือกอื่น

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• หากคุณต้องการจัดการกับสี ให้ใช้ฟังก์ชันจากโมดูล sass:color

วงเล็บและลำดับความสำคัญของตัวดำเนินการ

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

ด้านล่างคือตัวอย่างของการระบุลำดับการประเมินผลด้วยวงเล็บ

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

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

สรุป

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

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

YouTube Video