ملحقات CSS في Sass

القواعد المتشعّبة (Nested Rules)

Sass تسمح لقواعد CSS بأن تتشعّب داخل بعضها البعض. وفي تلك الحالة فإنّ القاعدة الداخلية لا تُطبّق إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). على سبيل المثال:

#main p {
  color: #00ff00;
  width: 97%;

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

تُصرّف إلى:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

هذا يساعد على تجنّب تكرار المُحددات الأبويّة (parent selectors)، ويجعل مخططات CSS ‏(CSS layouts) المعقدة التي تحتوي الكثير من المُحدّدات المتشعّبة أكثر بساطة. على سبيل المثال:

#main {
  width: 97%;

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

  pre { font-size: 3em; }
}

تُصرّف إلى:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

الإشارة إلى المُحدّد الأب (Referencing Parent Selectors) باستخدام الرمز &

يكون من المفيد أحيانًا استخدام المُحدّد الأب لقاعدة متشّعبةٍ بطريقةٍ غير الطريقة الافتراضية. على سبيل المثال، قد ترغب في اعتماد أنماط خاصةٍ عندما يمر مؤشر الفأرة على ذلك المُحدِّد (الصنف الزائف ‎:hover) أو عندما يكون للعنصر body صنفٌ معيّن. في هذه الحالات، يمكنك أن تحدّد صراحةً أين ينبغي أن يُدرج المحدِّد الأب عبر استخدام الرمز &. على سبيل المثال:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

ستُصرّف إلى:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

سيُبدّل الرمز & إلى المُحدِّد الأب كما يظهر في أسطُر CSS. وهذا يعني أنّه إن كان لديك قاعدةٌ عميقة التشعّب (أي أنَّها تتشعب أكثر من مستوى)، فستُستبين قيمة المحدِّد الأب بشكلٍ كاملٍ قبل استبدال المحرف &. على سبيل المثال:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

ستُصرّف إلى:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

أمّا في حالة المُحدّدات المركّبة (compound selectors) فيجب أن تظهر & في البداية، ولكن يمكن أن تُتبع بلاحقة، والتي ستضاف إلى المحدِّد الأب. على سبيل المثال:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

ستُصرّف إلى:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

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

الخصائص المتشعّبة (Nested Properties)

اللغة CSS لديها عدد غير قليل من الخاصيات في "مجالات الأسماء" (namespaces)؛ على سبيل المثال، الخاصيات font-family و font-size و font-weight كلّها موجودةٌ في فضاء الأسماء font. في لغة CSS، إن كنت ترغب في ضبط مجموعة من الخاصيات في نفس مجال الأسماء، فسيكون عليك كتابته في كل مرة. توفّر Sass اختصارًا لهذه العمليّة: يكفي أن تكتب مجال الأسماء مرّة واحدة، ثم تضع داخله كل الخصائص الفرعيّة. على سبيل المثال:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

ستُصرّف إلى:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

يمكن لخاصيّة مجال الأسماء (property namespace) نفسِها أن تُعطى قيمةً. على سبيل المثال:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

ستُصرّف إلى:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

المُحدّد النائب (Placeholder Selectors): ‏‎%foo

تدعم التقنية Sass نوعًا خاصًّا من المُحدِّدات (selectors) يُسمّى "المحدِّد النائب". هذه المحدِّدات تبدو كمحدّدات الأصناف (class selectors) ومحددات المُعرّفات (id selectors)، باستثناء أنّ الرمزين # و . سيُبدَّلان إلى الرمز %. يُفترض أن تُستخدم هذه المُحدّدات مع التعليمة ‎@extend. لمزيد من المعلومات راجع المُحدّدات المُعدّة للتوسيع (‎@extend-Only Selectors).

القواعد التي تستخدم المُحدّدات النائبة، دون استخدام الموجّه ‎@extend، لن تُترجم إلى لغة CSS.

مصادر

• قسم CSS Extensions من توثيق Sass الرسمي.