عرض مصدر Sass/CSS extensions

<noinclude>{{DISPLAYTITLE:ملحقات CSS في Sass}}</noinclude>
== القواعد المتشعّبة (Nested Rules) ==
Sass تسمح لقواعد [[CSS]] بأن تتشعّب داخل بعضها البعض. وفي تلك الحالة فإنّ القاعدة الداخلية لا تُطبّق إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). على سبيل المثال:<syntaxhighlight lang="sass">
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

</syntaxhighlight>تُصرّف إلى:<syntaxhighlight lang="css">
#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

</syntaxhighlight>هذا يساعد على تجنّب تكرار المُحددات الأبويّة (parent selectors)، ويجعل مخططات [[CSS]] ‏(CSS layouts) المعقدة التي تحتوي الكثير من المُحدّدات المتشعّبة أكثر بساطة. على سبيل المثال:<syntaxhighlight lang="sass">
#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

</syntaxhighlight>تُصرّف إلى:<syntaxhighlight lang="css">
#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

</syntaxhighlight>

== الإشارة إلى المُحدّد الأب (Referencing Parent Selectors) باستخدام الرمز & ==
يكون من المفيد أحيانًا استخدام المُحدّد الأب لقاعدة متشّعبةٍ بطريقةٍ غير الطريقة الافتراضية. على سبيل المثال، قد ترغب في اعتماد أنماط خاصةٍ عندما يمر مؤشر الفأرة على ذلك المُحدِّد (الصنف الزائف <code>[[CSS/:hover|‎:hover]]</code>) أو عندما يكون للعنصر <code>[[HTML/body|body]]</code> صنفٌ معيّن. في هذه الحالات، يمكنك أن تحدّد صراحةً أين ينبغي أن يُدرج المحدِّد الأب عبر استخدام الرمز <code>&</code>. على سبيل المثال:<syntaxhighlight lang="sass">
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

</syntaxhighlight>سيُبدّل الرمز <code>&</code> إلى المُحدِّد الأب كما يظهر في أسطُر [[CSS]]. وهذا يعني أنّه إن كان لديك قاعدةٌ عميقة التشعّب (أي أنَّها تتشعب أكثر من مستوى)، فستُستبين قيمة المحدِّد الأب بشكلٍ كاملٍ قبل استبدال المحرف <code>&</code>. على سبيل المثال:<syntaxhighlight lang="sass">
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

</syntaxhighlight>أمّا في حالة المُحدّدات المركّبة (compound selectors) فيجب أن تظهر <code>&</code> في البداية، ولكن يمكن أن تُتبع بلاحقة، والتي ستضاف إلى المحدِّد الأب. على سبيل المثال:<syntaxhighlight lang="sass">
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

</syntaxhighlight>إن لم يكن من الممكن تطبيق لاحقةٍ على المحدِّد الأب، فستُطلِق Sass خطأً.

== الخصائص المتشعّبة (Nested Properties) ==
اللغة [[CSS]] لديها عدد غير قليل من الخاصيات في "مجالات الأسماء" (namespaces)؛ على سبيل المثال، الخاصيات <code>[[CSS/font-family|font-family]]</code> و <code>[[CSS/font-size|font-size]]</code> و <code>[[CSS/font-weight|font-weight]]</code> كلّها موجودةٌ في فضاء الأسماء <code>[[CSS/font|font]]</code>. في لغة [[CSS]]، إن كنت ترغب في ضبط مجموعة من الخاصيات في نفس مجال الأسماء، فسيكون عليك كتابته في كل مرة. توفّر Sass اختصارًا لهذه العمليّة: يكفي أن تكتب مجال الأسماء مرّة واحدة، ثم تضع داخله كل الخصائص الفرعيّة. على سبيل المثال:<syntaxhighlight lang="sass">
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

</syntaxhighlight>يمكن لخاصيّة مجال الأسماء (property namespace) نفسِها أن تُعطى قيمةً. على سبيل المثال:<syntaxhighlight lang="sass">
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}
</syntaxhighlight>

== المُحدّد النائب (Placeholder Selectors): ‏‎<code>%foo</code> ==
تدعم التقنية Sass نوعًا خاصًّا من المُحدِّدات (selectors) يُسمّى "المحدِّد النائب". هذه المحدِّدات تبدو [[CSS/Class Selectors|كمحدّدات الأصناف]] (class selectors) [[CSS/ID Selectors|ومحددات المُعرّفات]] (id selectors)، باستثناء أنّ الرمزين <code>#</code> و <code>.</code> سيُبدَّلان إلى الرمز <code>%</code>. يُفترض أن تُستخدم هذه المُحدّدات مع التعليمة <code>[[Sass/@ rules|‎@extend]]</code>. لمزيد من المعلومات راجع المُحدّدات المُعدّة للتوسيع (‎@extend-Only Selectors).

القواعد التي تستخدم المُحدّدات النائبة، دون استخدام الموجّه <code>[[Sass/@ rules|‎@extend]]</code>، لن تُترجم إلى لغة CSS.

== مصادر ==
* [https://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions قسم CSS Extensions من توثيق Sass الرسمي].
[[تصنيف:Sass]]