SASS `@at-root`

บทความนี้อธิบาย @at-root ของ SASS

เราจะครอบคลุมตั้งแต่การใช้งานพื้นฐานของ @at-root ไปจนถึงตัวอย่างขั้นสูงแบบเป็นขั้นเป็นตอน

YouTube Video

เกี่ยวกับ SASS @at-root

@at-root เป็นไดเรกทีฟที่ SASS มีให้ ใช้สำหรับย้ายตัวเลือก (selector) หรือคุณสมบัติที่ถูกซ้อนอยู่ จากการซ้อนระดับปัจจุบันไปยังสโคประดับบน (parent scope) ด้วยการใช้ความสามารถนี้ คุณสามารถควบคุมความลึกของการซ้อนได้ และสร้าง CSS ตามที่ตั้งใจได้อย่างมีประสิทธิภาพมากขึ้น

การใช้งานพื้นฐานของ @at-root

การซ้อน (nesting) ของ SASS ทำให้โค้ดอ่านง่ายขึ้น แต่การซ้อนที่ลึกเกินไปอาจทำให้เกิดการสร้าง CSS ที่ไม่ตั้งใจ ด้วยการใช้ @at-root คุณสามารถแยกบล็อกโค้ดบางส่วนออกจากโครงสร้างการซ้อนได้

ไวยกรณ์พื้นฐาน

1@at-root {
2  // Code to be output at the parent (root) scope
3}

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

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

CSS ที่คอมไพล์แล้ว

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• เนื่องจาก @at-root จึงทำให้ .nav-item ถูกสร้างออกมานอก .nav

@at-root ในตัวเลือกแบบซ้อน

แม้อยู่ภายในการซ้อนที่ลึก การใช้ @at-root จะช่วยให้คุณย้ายตัวเลือกบางตัวไปยังระดับราก (root) สิ่งนี้ทำให้คุณสามารถสร้าง CSS ได้ตามที่ควบคุมไว้ แม้อยู่ในโครงสร้างที่ซับซ้อน

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

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

CSS ที่คอมไพล์แล้ว

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• ด้วยการใช้ @at-root .card-title จะถูกสร้างอยู่นอก .card-header

@at-root พร้อมอาร์กิวเมนต์

เมื่อระบุอาร์กิวเมนต์ จะสามารถควบคุม @at-root ได้ยืดหยุ่นมากขึ้น

อาร์กิวเมนต์ without

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

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

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

CSS ที่คอมไพล์แล้ว

1.nav__item {
2  color: red;
3}

• ในกรณีนี้ @at-root (without: media) จะตัดสโคปของมีเดียคิวรีออก และ .nav__item จะถูกสร้างที่ระดับราก

อาร์กิวเมนต์ with

การใช้งาน with จะคงไว้เฉพาะสโคปที่ระบุในผลลัพธ์ มีประโยชน์เมื่อคุณต้องการเอาต์พุตไปยังระดับรากโดยยังคงรักษาสโคปบางอย่างไว้

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

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

CSS ที่คอมไพล์แล้ว

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) จะย้ายตัวเลือกไปยังระดับราก โดยคงโครงสร้างของมีเดียคิวรีไว้

การระบุหลายเงื่อนไข

คุณยังสามารถระบุขอบเขตหลายรายการพร้อมกันได้ โดยแยกด้วยช่องว่าง

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

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

CSS ที่คอมไพล์แล้ว

1.global-style {
2  color: green;
3}

• ในตัวอย่างนี้ ทั้ง rule (ตัวเลือกทั่วไป) และ media (มีเดียคิวรี) ถูกตัดออก ดังนั้น .global-style จึงไม่อยู่ภายใต้สโคปใด และถูกสร้างทั้งหมดที่ระดับราก สิ่งนี้มีประโยชน์เมื่อคุณต้องการกำหนดสไตล์แบบโกลบอลโดยตั้งใจ แม้อยู่ภายในการซ้อนที่ซับซ้อน

การผสานกับมีเดียคิวรี

ด้วยการใช้ @at-root คุณสามารถเอาต์พุตสไตล์ระดับรูทจากภายในมีเดียคิวรีได้ สิ่งนี้ช่วยให้คุณสามารถกำหนดการออกแบบแบบตอบสนองในระดับคอมโพเนนต์

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

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

CSS ที่คอมไพล์แล้ว

1.container-large {
2  width: 80%;
3}

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

กรณีการใช้งานของ @at-root

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

แยกคอมโพเนนต์และธีมออกจากกัน

ด้วยการใช้ @at-root คุณสามารถสร้างคลาสโกลบอลที่เป็นอิสระได้ แม้จะอยู่ภายในมีเดียคิวรี สิ่งนี้ทำให้ง่ายต่อการจัดระเบียบธีมและสถานะต่อคอมโพเนนต์

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

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

CSS ที่คอมไพล์แล้ว

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• ในตัวอย่างนี้ ขณะกำหนดสไตล์สำหรับธีมมืดภายใน .card @at-root จะสร้างคลาส .card-dark แยกต่างหาก สิ่งนี้ช่วยให้คุณสลับคลาสได้อย่างยืดหยุ่นข้ามธีมต่างๆ

หมายเหตุ

เมื่อใช้ @at-root โปรดคำนึงถึงประเด็นต่อไปนี้

1. หลีกเลี่ยงการใช้งานมากเกินไป @at-root ทรงพลัง แต่การใช้มากเกินไปอาจทำให้เจตนาของการซ้อนของคุณไม่ชัดเจน

2. ทำให้เจตนาชัดเจน การใส่คอมเมนต์ว่าทำไมคุณถึงใช้ @at-root จะช่วยให้นักพัฒนาคนอื่นเข้าใจได้ง่ายขึ้น

3. ระมัดระวังความสอดคล้องของสโคป การย้ายผลลัพธ์ไปยังระดับรากอาจเปลี่ยนความสัมพันธ์การพึ่งพาของสไตล์ ระบุให้ชัดเจนว่าส่งผลกับองค์ประกอบใดบ้าง

4. ผสานกับความสามารถอื่นๆ ของ SASS การผสาน @at-root เข้ากับ @mixin และ @function ช่วยให้การออกแบบ CSS ยืดหยุ่นมากยิ่งขึ้น

สรุป

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

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

YouTube Video