Sass

متغيرات ساس

المتغيرات هي طريقة لتخزين المعلومات التي يمكنك إعادة استخدامها لاحقا.

باستخدام Sass ، يمكنك تخزين المعلومات في متغيرات ، مثل:

• strings
• numbers
• colors
• booleans
• lists
• nulls

يستخدم Sass الرمز $ ، متبوعا باسم ، لإعلان المتغيرات:

قراءة المزيد...

قواعد وخصائص Sass المتداخلة

يتيح لك Sass تداخل محددات CSS بنفس طريقة HTML.

انظر إلى مثال لبعض التعليمات البرمجية ل Sass للتنقل في الموقع:

قراءة المزيد...

saas @import وجزئيات

تماما مثل CSS ، يدعم Sass أيضا التوجيه @import.

يسمح لك التوجيه @import بتضمين محتوى ملف في ملف آخر.

يحتوي توجيه CSS @import على عيب كبير بسبب مشكلات الأداء ؛ يقوم بإنشاء طلب HTTP إضافي في كل مرة تتصل بها. ومع ذلك ، يتضمن توجيه Sass @import الملف في CSS ؛ لذلك لا يلزم إجراء مكالمة HTTP إضافية في وقت التشغيل!

قراءة المزيد...

sass @mixin و @include

يتيح لك التوجيه @mixin إنشاء كود CSS لإعادة استخدامه في جميع أنحاء موقع الويب.

يتم إنشاء التوجيه @include للسماح لك باستخدام (تضمين) mixin.

قراءة المزيد...

sass @extend والميراث

يتيح لك التوجيه @extend مشاركة مجموعة من خصائص CSS من محدد إلى آخر.

يعد التوجيه @extend مفيدا إذا كان لديك عناصر ذات تصميم متطابق تقريبا تختلف فقط في بعض التفاصيل الصغيرة.

يقوم مثال Sass التالي أولا بإنشاء نمط أساسي للأزرار (سيتم استخدام هذا النمط لمعظم الأزرار). بعد ذلك ، نقوم بإنشاء نمط واحد لزر "إبلاغ" ونمط واحد لزر "إرسال". يرث كل من الزر "تقرير" و "إرسال" جميع خصائص CSS من فئة .button-basic ، من خلال التوجيه @extend. بالإضافة إلى ذلك ، لديهم ألوانهم الخاصة المحددة:

قراءة المزيد...