قواعد النesting وخصائص Sass
- الصفحة السابقة متغيرات Sass
- الصفحة التالية استيراد Sass
قواعد Sass المدمجة
Sass يسمح لك بدمج اختيارات CSS بنفس الطريقة التي تستخدمها HTML.
انظر مثال Sass للإرشاد على هذا الموقع:
نحو الأسلوب SCSS:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
لاحظ، في Sass،ul
،li
و a
تتداخل الخصائص في nav
في مبدأ الخصائص.
أما في CSS، فإن القواعد معرفة بشكل صريح (ليس مدمجة):
قواعد CSS:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
لأنك يمكنك دمج الخصائص في Sass، لذا هو أكثر وضوحًا وسهولة في القراءة من CSS القياسية.
خصائص Sass المدمجة
العديد من خصائص CSS تحتوي على نفس المقدمة، مثل:
font-family
font-size
font-weight
text-align
text-transform
text-overflow
من خلال استخدام Sass، يمكنك كتابة هذه الخاصيات كخصائص مضمنة:
نحو الأسلوب SCSS:
font: { family: Helvetica, sans-serif; size: 18px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; }
مترجم Sass سيفسر الكود أعلاه إلى CSS العادي:
تدفق CSS:
font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden;
- الصفحة السابقة متغيرات Sass
- الصفحة التالية استيراد Sass