أنماط المخرجات في Sass
بالرغم من أنّ النمط الافتراضي لمخرجات CSS في Sass لطيفٌ ويعكسُ بِنية المستند، إلا أنَّ الأذواق والاحتياجات تختلف من شخص لآخر، لذا تدعمُ Sass عدة أنماط أخرى.
تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار :style أو استخدام الراية --style في سطر الأوامر.
النمط المتشعّب :nested
النمط المُتشعّب هو نمطُ Sass الافتراضي، لأنّه يعكس بنية أنماط CSS ومستند HTML التي تُصمّمها. لكل خاصّية في هذا النمط سطرٌ خاصّ بها، ولكنّ الإزاحة (indentation) ليست ثابتةً إذ تزاح كلّ قاعدةٍ بناءً عمق تشعّبها. انظر مثلًا الشيفرة التالية:
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
النمط المتشعّب مفيدٌ جدًّا عند قراءة ملفات CSS الكبيرة إذ يُسهّل عليك استيعاب بنية الملف دون قراءة أي شيء في الواقع.
النمط الموسّع :expanded
النمط المُوسّع هو نمطٌ اعتياديٌّ وأكثر شبهًا بنمط CSS العادي، إذ تأخذ كل خاصيةٍ سطرًا واحدًا. تُزاخ الخاصِّيَّات داخل القواعد، ولكنّ القواعد لا تزاح بأيِّ طريقةٍ أخرى. انظر المثال التالي:
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
النمط المختزل :compact
النمط المُختزل (Compact) يأخذ مساحةً أقل موازنةً بالنمط المتشعّب أو المُوسّع إذ يركز على المُحدّدات أكثر من خاصِّيَّاتِها. كل قاعدةٍ من قواعد CSS تأخذ سطرًا واحدًا فقط، وتُعرّف كل الخاصيّات على ذلك السطر. توضع القواعد المتشعّبة بجانب بعضها بعضًا دون العودة إلى سطرٍ جديدٍ، في حين أنّ مجموعات القواعد المنفصلة يتوسطها سطرٌ جديدٌ. انظر مثلًا الشيفرة التالية:
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
النمط المضغوط :compressed
يأخذ النّمط المضغوط (compressed style) أدنى قدرٍ ممكنٍ من المساحة، وليس فيه أيُّ مسافاتٍ بيضاء باستثناء الضروري منها لفصل المُحدّدات إضافةً إلى سطرٍ جديدٍ في نهاية الملف. يشمل أيضًا بعض أساليب الضغط الثانويَّة الأخرى مثل اختيار أصغر تمثيلٍ ممكنٍ للألوان. لا يُفترض أن يكون هذا النمط قابلًا للقراءة من قبل المستخدمين الآخرين. انظر مثلًا الشيفرة التالية:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}