الفرق بين المراجعتين لصفحة: «Sass/output style»
جميل-بيلوني (نقاش | مساهمات) ط مراجعة الصفحة وتدقيقها. |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 3: | سطر 3: | ||
تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار <code>[[Sass/usage|:style]]</code> أو استخدام الراية <code>--style</code> في سطر الأوامر. | تسمح لك 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> == | == النمط المتشعّب <code>:nested</code> == | ||
| سطر 54: | سطر 56: | ||
== مصادر == | == مصادر == | ||
* [https://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style قسم Output Style من توثيق Sass الرسمي]. | * [https://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style قسم Output Style من توثيق Sass الرسمي]. | ||
[[تصنيف:Sass]] | [[تصنيف:Sass|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 07:01، 20 مايو 2018
بالرغم من أنّ النمط الافتراضي لمخرجات CSS في Sass لطيفٌ ويعكسُ بِنية المستند، إلا أنَّ الأذواق والاحتياجات تختلف من شخص لآخر، لذا تدعمُ Sass عدة أنماط أخرى.
تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار :style أو استخدام الراية --style في سطر الأوامر.
ملاحظة: لا يدعم مصرّف Sass الذي يمكن تثبيت باستخدام مدير الحزم npm النمط :nested؛ إذا أردتَ استخدامه فثبت مصرّف Sass كما هو موضّح في صفحة تثبيت وضبط واستخدام Sass.
النمط المتشعّب :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}