SASS `@at-root`

تشرح هذه المقالة توجيه @at-root في SASS۔

سنغطي كل شيء من الاستخدام الأساسي لـ @at-root إلى أمثلة متقدمة، خطوة بخطوة۔

YouTube Video

حول SASS @at-root

@@at-root هو توجيه يقدمه SASS ويُستخدم لنقل المحددات أو الخصائص المتداخلة من التعشيق الحالي إلى نطاق الأب۔ من خلال الاستفادة من هذه الميزة، يمكنك التحكم في عمق التعشيق وتوليد CSS المقصود بكفاءة أكبر۔

الاستخدام الأساسي لـ @at-root

التعشيق في 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 نقل محددات معينة إلى المستوى الجذري۔ هذا يمكّنك من إخراج 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، يتجاهل الإخراج النطاقات المحددة۔ بعبارة أخرى، يمكنك إزالة قواعد الأصل أو استعلامات الوسائط۔

مثال على الاستخدام

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 يُبقي فقط النطاقات المحددة في الإخراج۔ يكون مفيدًا عندما تريد الإخراج إلى الجذر مع الإبقاء على نطاقات معينة۔

مثال على الاستخدام

 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