Sass/CSS extensions

القواعد المتشعّبة (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 الرسمي.