ความแตกต่างระหว่าง Native CSS และ Sass Nesting

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

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

คุณต้องใช้ “&” กับตัวเลือกองค์ประกอบใน CSS ดั้งเดิม

CSS Nesting ยังคงเป็นข้อกำหนดฉบับร่าง พร้อมการรองรับเบราว์เซอร์ที่หลากหลาย อย่าลืมตรวจสอบเว็บไซต์ เช่น caniuse.com เพื่อดูข้อมูลล่าสุด

นี่คือการสาธิตประเภทของโครงสร้างแบบซ้อนที่สามารถนำมาใช้ภายใน Sass โดยใช้ไวยากรณ์ SCSS:

 .nav {
  ul { display: flex; }
  a { color: black; }
}

ข้อมูลโค้ดที่กำหนดเกี่ยวข้องกับกฎการจัดสไตล์สำหรับแถบนำทางของเอกสาร HTML โดยเฉพาะอย่างยิ่ง กำหนดว่ารายการที่เรียงลำดับใดๆ ที่มีอยู่ภายในองค์ประกอบที่มีคลาส"nav"จะต้องแสดงในรูปแบบการจัดตำแหน่งที่ยืดหยุ่น (คอลัมน์) นอกจากนี้ ยังกำหนดว่าข้อความไฮเปอร์ลิงก์ใดๆ ที่ปรากฏภายในองค์ประกอบดังกล่าวจะต้องมีสีดำ

ใน Native CSS รูปแบบการซ้อนที่กล่าวมาข้างต้นถือว่าไม่สามารถยอมรับได้ เพื่อให้โครงสร้างนี้ทำงานได้อย่างมีประสิทธิภาพ จะต้องรวมสัญลักษณ์เครื่องหมายและ (&) นำหน้าแต่ละองค์ประกอบที่ล้อมรอบ ดังภาพประกอบด้านล่าง:

 .nav {
  & ul { display: flex; }
  & a { color: black; }
} 

ก่อนที่จะมีการแก้ไขล่าสุด การวนซ้ำครั้งแรกของ Cascading Style Sheets (CSS) ไม่อนุญาตให้มีการหุ้มตัวเลือกประเภท อย่างไรก็ตาม ด้วยการปรับเปลี่ยนล่าสุด ขณะนี้สามารถละเว้นการใช้สัญลักษณ์ “&” เมื่อปิดตัวเลือกประเภทได้ อย่างไรก็ตาม ผู้ใช้ควรทราบว่าเว็บเบราว์เซอร์ที่มีการเปลี่ยนแปลงอายุมากขึ้น เช่น Google Chrome และ Apple Safari อาจยังขาดความเข้ากันได้กับวิธีการที่ได้รับการปรับปรุงนี้

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

 .nav {
  .nav-list { display: flex; }
  .nav-link { color: black; }
}

คุณไม่สามารถสร้างตัวเลือกใหม่โดยใช้"&“ใน Native CSS

หนึ่งในแง่มุมที่น่าสนใจของ Sass ที่คุณอาจชื่นชมคือความสามารถในการอำนวยความสะดวกในการสร้างโค้ดผ่านโครงสร้างดังที่แสดงด้านล่าง:

 .nav {
  &-list { display: flex; }
  &-link { color: black; }
}

เมื่อคอมไพล์โค้ด Sass ข้างต้นจะให้ผลลัพธ์ CSS ที่ยังไม่ได้ประมวลผลตามมา:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}

ใน CSS มาตรฐาน ไม่รองรับการใช้สัญลักษณ์ “&” เพื่อสร้างตัวเลือกใหม่ อย่างไรก็ตาม เมื่อใช้ Sass คอมไพลเลอร์จะแทนที่”&“ด้วยองค์ประกอบที่ล้อมรอบ เช่น”.nav"ได้อย่างมีประสิทธิภาพ ดังนั้นจึงหลีกเลี่ยงการก่อตัวของตัวเลือกสารประกอบที่ไม่เหมาะสม ซึ่งจะทำให้ได้ผลลัพธ์ที่แตกต่างกันเมื่อเปรียบเทียบกับผลลัพธ์ที่ต้องการ

ตัวอย่างโค้ดนี้ควรทำงานอย่างถูกต้องโดยใช้ไวยากรณ์ CSS ดั้งเดิม:

 .nav {
  &.nav-list { display: flex; }
  &.nav-link { color: black; }
}

รหัสที่ให้มาใช้งานได้เนื่องจากการโต้ตอบระหว่างตัวเลือกที่ใช้ภายใน ตัวเลือกแรกจะจับคู่องค์ประกอบที่มีชื่อคลาสเป็น"nav-list"หรือ"nav-link"ในขณะที่ตัวเลือกที่สองจะกำหนดเป้าหมายเฉพาะที่มีชื่อคลาสเป็น"nav-link"การเว้นวรรคระหว่างสัญลักษณ์ “&” และตัวเลือกต่อมา (เช่น “nav.nav-list”) จะส่งผลให้เกิดข้อผิดพลาดทางไวยากรณ์ที่ไม่ถูกต้อง เนื่องจากจะสร้างกลุ่มใหม่ที่ประกอบด้วยทั้ง “nav” และ “.nav-รายการ” แทนที่จะกำหนดเป้าหมายองค์ประกอบที่มีทั้งสองคลาส

ใน CSS โดยธรรมชาติ การใช้เครื่องหมายและในลักษณะที่แสดงด้านล่างจะส่งผลให้เกิดข้อผิดพลาดทางความหมาย:

 .nav {
  &__nav-list { display: flex; }
  &__nav-link { color: black; }
}

มันเหมือนกับการเขียนสิ่งนี้:

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}

อาจเป็นเรื่องที่ไม่คาดคิด เนื่องจากทั้งองค์ประกอบ และ อยู่ภายในตัวเลือก .nav อย่างไรก็ตาม เครื่องหมายและ ( & ) จะวางตำแหน่งองค์ประกอบที่ซ้อนกันก่อนองค์ประกอบหลักอย่างมีประสิทธิภาพ

ความจำเพาะอาจแตกต่างกันได้

เป็นเรื่องที่ควรค่าแก่การกล่าวถึงผลกระทบต่อความแม่นยำที่เกิดขึ้นกับไวยากรณ์ที่ซ้อนกันของ Sass ซึ่งต่างจากผลที่เหมือนกันใน CSS มาตรฐานซึ่งสมควรได้รับความสนใจ

ที่จริงแล้ว สมมติว่ามีทั้งองค์ประกอบหลักและองค์ประกอบบทความภายในโครงสร้าง HTML การใช้สไตล์ CSS ที่ให้มาจะส่งผลให้แท็ก h2 ใดๆ ที่อยู่ภายในองค์ประกอบเหล่านั้นถูกแสดงผลด้วยแบบอักษร serif

 #main, article {
  h2 {
    font-family: serif;
  }
}

CSS ผลลัพธ์ที่สร้างจากโค้ด Sass ดังกล่าวจะปรากฏดังนี้:

 #main h2,
article h2 {
  font-family: serif;
}

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

 :is(#main, article) h2 {
  font-family: serif;
}

ตัวเลือก is() ใน LESS แตกต่างเล็กน้อยจากตัวเลือกใน Sass ที่เกี่ยวข้องกับการจัดการกฎความจำเพาะ โดยเฉพาะอย่างยิ่ง เมื่อใช้ :is() ความเฉพาะเจาะจงของตัวเลือกจะถูกยกระดับโดยอัตโนมัติให้เป็นองค์ประกอบที่เฉพาะเจาะจงที่สุดภายในรายการพารามิเตอร์ที่ให้มา

ลำดับขององค์ประกอบอาจเปลี่ยนองค์ประกอบที่เลือก

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

พิจารณา HTML ต่อไปนี้ เช่น:

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>

และ CSS ต่อไปนี้:

 body { font-size: 5rem; }

.call-to-action .heading {
  .dark-theme & {
    padding: 0.25rem;
    background: hsl(42, 72%, 61%);
    color: #111;
  }
}

การใช้ Sass เป็นตัวประมวลผลล่วงหน้า CSS ให้ผลลัพธ์ดังต่อไปนี้:

ในบริบท HTML ควรแทรกองค์ประกอบ ที่มีการกำหนดคลาสของ"ธีมสีเข้ม"ภายในคอนเทนเนอร์หลักซึ่งแสดงโดยการจำแนกประเภทของ"คำกระตุ้นการตัดสินใจ"ซึ่งเป็นเกณฑ์การเลือกผลลัพธ์ที่ใช้โดย Sass (ตัวประมวลผลล่วงหน้า CSS ) จะกลายเป็นความผิดปกติ อย่างไรก็ตาม ภายใต้ข้อตกลง CSS ทั่วไป (กล่าวคือ โดยไม่ต้องใช้ตัวประมวลผลล่วงหน้า CSS) คุณสมบัติการจัดรูปแบบที่เกี่ยวข้องจะยังคงไม่เสียหายและมีประสิทธิภาพ

พฤติกรรมดังกล่าวเกิดขึ้นจากลักษณะที่คลาสหลอก :is() ทำงานภายใน ส่งผลให้เกิดการสร้างการแสดง CSS ที่ไม่มีการตกแต่งตามมาดังที่แสดงด้านล่าง:

 .dark-theme :is(.call-to-action .heading) {
  /* CSS code */
}

ส่วนหัวที่เป็นปัญหานั้นเป็นการสืบทอดของทั้งองค์ประกอบ .dark-theme และองค์ประกอบ .call-to-action แต่ลำดับเฉพาะไม่ส่งผลต่อฟังก์ชันการทำงาน ตราบใดที่ส่วนหัวนั้นสืบทอดมาจากองค์ประกอบทั้งสอง ไม่ว่าจะอยู่ในลำดับใดโดยเฉพาะก็ไม่ส่งผลกระทบต่อผลลัพธ์

ในสถานการณ์เฉพาะนี้ มันถือเป็นอินสแตนซ์ที่พบไม่บ่อยนัก แต่การเข้าใจกลไกภายในของตัวเลือก:is() สามารถเพิ่มความชำนาญในส่วนที่เกี่ยวกับองค์ประกอบที่ซ้อนกันใน CSS นอกจากนี้ความรู้ดังกล่าวยังช่วยอำนวยความสะดวกในกระบวนการแก้ไขปัญหา CSS ได้อย่างมีประสิทธิภาพมากขึ้น

เรียนรู้วิธีใช้ Sass ใน React

จากความสามารถในการคอมไพล์เป็น CSS ทำให้ Sass เข้ากันได้กับเฟรมเวิร์ก UI ที่หลากหลาย เนื่องจากเข้ากันได้กับเฟรมเวิร์กดังกล่าวแทบทุกชนิด การติดตั้งในแพลตฟอร์มต่างๆ รวมถึง Vue, Preact, Svelte และ React นั้นง่ายดาย โดยมอบประสบการณ์การบูรณาการที่ราบรื่นกับเทคโนโลยีต่างๆ

การใช้ Sass ภายในบริบทของ React มีข้อดีหลายประการ โดยเฉพาะอย่างยิ่งความสามารถในการสร้างสไตล์ที่มีการจัดระเบียบอย่างดีและนำกลับมาใช้ใหม่ได้ ผ่านการปรับใช้ตัวแปรและมิกซ์อิน ความเชี่ยวชาญในเทคโนโลยีนี้สามารถเพิ่มความสามารถในการสร้างโค้ดที่ประณีตและมีไหวพริบได้อย่างมาก ซึ่งท้ายที่สุดแล้วจะช่วยส่งเสริมการเติบโตทางอาชีพในฐานะนักพัฒนา React