الفرق بين المراجعتين لصفحة: «Sass/output style»
ط إضافة عنوان الصفحة والتصنيفات |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة الصفحة وتدقيقها. |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:أنماط المخرجات في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE:أنماط المخرجات في Sass}}</noinclude> | ||
بالرغم من أنّ النمط الافتراضي لمخرجات [[CSS]] في Sass لطيفٌ ويعكسُ بِنية المستند، إلا أنَّ الأذواق والاحتياجات تختلف من شخص لآخر، لذا تدعمُ Sass عدة أنماط أخرى. | |||
تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار <code>[[Sass/usage|:style]]</code> أو | تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار <code>[[Sass/usage|:style]]</code> أو استخدام الراية <code>--style</code> في سطر الأوامر. | ||
== النمط المتشعّب | == النمط المتشعّب <code>:nested</code> == | ||
النمط المُتشعّب هو نمطُ Sass الافتراضي، لأنّه يعكس بنية أنماط [[CSS]] ومستند [[HTML]] التي | النمط المُتشعّب هو نمطُ Sass الافتراضي، لأنّه يعكس بنية أنماط [[CSS]] ومستند [[HTML]] التي تُصمّمها. لكل خاصّية في هذا النمط سطرٌ خاصّ بها، ولكنّ الإزاحة (indentation) ليست ثابتةً إذ تزاح كلّ قاعدةٍ بناءً عمق تشعّبها. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="css"> | ||
#main { | #main { | ||
color: #fff; | color: #fff; | ||
| سطر 17: | سطر 17: | ||
text-decoration: underline; } | text-decoration: underline; } | ||
</syntaxhighlight>النمط المتشعّب مفيدٌ جدًّا عند قراءة ملفات CSS الكبيرة | </syntaxhighlight>النمط المتشعّب مفيدٌ جدًّا عند قراءة ملفات CSS الكبيرة إذ يُسهّل عليك استيعاب بنية الملف دون قراءة أي شيء في الواقع. | ||
== النمط الموسّع <code>:expanded</code> == | == النمط الموسّع <code>:expanded</code> == | ||
النمط المُوسّع هو نمطٌ اعتياديٌّ وأكثر شبهًا بنمط CSS العادي، | النمط المُوسّع هو نمطٌ اعتياديٌّ وأكثر شبهًا بنمط CSS العادي، إذ تأخذ كل خاصيةٍ سطرًا واحدًا. تُزاخ الخاصِّيَّات داخل القواعد، ولكنّ القواعد لا تزاح بأيِّ طريقةٍ أخرى. انظر المثال التالي:<syntaxhighlight lang="css"> | ||
#main { | #main { | ||
color: #fff; | color: #fff; | ||
| سطر 38: | سطر 38: | ||
== النمط المختزل <code>:compact</code> == | == النمط المختزل <code>:compact</code> == | ||
النمط المُختزل (Compact) يأخذ مساحةً أقل | النمط المُختزل (Compact) يأخذ مساحةً أقل موازنةً بالنمط المتشعّب أو المُوسّع إذ يركز على المُحدّدات أكثر من خاصِّيَّاتِها. كل قاعدةٍ من قواعد CSS تأخذ سطرًا واحدًا فقط، وتُعرّف كل الخاصيّات على ذلك السطر. توضع القواعد المتشعّبة بجانب بعضها بعضًا دون العودة إلى سطرٍ جديدٍ، في حين أنّ مجموعات القواعد المنفصلة يتوسطها سطرٌ جديدٌ. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="css"> | ||
#main { color: #fff; background-color: #000; } | #main { color: #fff; background-color: #000; } | ||
#main p { width: 10em; } | #main p { width: 10em; } | ||
| سطر 47: | سطر 47: | ||
== النمط المضغوط <code>:compressed</code> == | == النمط المضغوط <code>:compressed</code> == | ||
يأخذ النّمط المضغوط (compressed style) أدنى قدرٍ ممكنٍ من المساحة، وليس فيه أيُّ مسافاتٍ بيضاء باستثناء الضروري منها لفصل | يأخذ النّمط المضغوط (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} | #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline} | ||
مراجعة 14:04، 1 مايو 2018
بالرغم من أنّ النمط الافتراضي لمخرجات 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}