عرض مصدر Sass/output style

<noinclude>{{DISPLAYTITLE:أنماط المخرجات في Sass}}</noinclude>
بالرغم من أنّ النمط الافتراضي لمخرجات [[CSS]] في Sass لطيفٌ ويعكسُ بِنية المستند، إلا أنَّ الأذواق والاحتياجات تختلف من شخص لآخر، لذا تدعمُ Sass عدة أنماط أخرى.

تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار <code>[[Sass/usage|‎:style]]</code> أو استخدام الراية <code>‎--style</code> في سطر الأوامر.

ملاحظة: لا يدعم مصرّف Sass الذي يمكن تثبيت باستخدام مدير الحزم npm النمط <code>:nested</code>؛ إذا أردتَ استخدامه فثبت مصرّف Sass كما هو موضّح في صفحة [[Sass/usage#.D8.AA.D8.AB.D8.A8.D9.8A.D8.AA Sass|تثبيت وضبط واستخدام Sass]].

== النمط ‎المتشعّب <code>‎:nested</code> ==
النمط المُتشعّب هو نمطُ Sass الافتراضي، لأنّه يعكس بنية أنماط [[CSS]] ومستند [[HTML]] التي تُصمّمها. لكل خاصّية في هذا النمط سطرٌ خاصّ بها، ولكنّ الإزاحة (indentation) ليست ثابتةً إذ تزاح كلّ قاعدةٍ بناءً عمق تشعّبها. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="css">
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

</syntaxhighlight>النمط المتشعّب مفيدٌ جدًّا عند قراءة ملفات CSS الكبيرة إذ يُسهّل عليك استيعاب بنية الملف دون قراءة أي شيء في الواقع.

== النمط الموسّع ‎<code>:expanded</code> ==
النمط المُوسّع هو نمطٌ اعتياديٌّ وأكثر شبهًا بنمط CSS العادي، إذ تأخذ كل خاصيةٍ سطرًا واحدًا. تُزاخ الخاصِّيَّات داخل القواعد، ولكنّ القواعد لا تزاح بأيِّ طريقةٍ أخرى. انظر المثال التالي:<syntaxhighlight lang="css">
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

</syntaxhighlight>

== النمط المختزل <code>‎:compact</code> ==
النمط المُختزل (‎Compact) يأخذ مساحةً أقل موازنةً بالنمط المتشعّب أو المُوسّع إذ يركز على المُحدّدات أكثر من خاصِّيَّاتِها. كل قاعدةٍ من قواعد CSS تأخذ سطرًا واحدًا فقط، وتُعرّف كل الخاصيّات على ذلك السطر. توضع القواعد المتشعّبة بجانب بعضها بعضًا دون العودة إلى سطرٍ جديدٍ، في حين أنّ مجموعات القواعد المنفصلة يتوسطها سطرٌ جديدٌ. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="css">
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

</syntaxhighlight>

== النمط المضغوط <code>‎:compressed</code> ==
يأخذ النّمط المضغوط (compressed style) أدنى قدرٍ ممكنٍ من المساحة، وليس فيه أيُّ مسافاتٍ بيضاء باستثناء الضروري منها لفصل المُحدّدات إضافةً إلى سطرٍ جديدٍ في نهاية الملف. يشمل أيضًا بعض أساليب الضغط الثانويَّة الأخرى مثل اختيار أصغر تمثيلٍ ممكنٍ للألوان. لا يُفترض أن يكون هذا النمط قابلًا للقراءة من قبل المستخدمين الآخرين. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="css">
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

</syntaxhighlight>

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