أنماط المخرجات في 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}