متغيرات SASS
تشرح هذه المقالة متغيرات SASS۔
سنقدم شرحًا مفصلًا لمتغيرات SASS ونتعلم كيفية استخدامها خطوة بخطوة۔
YouTube Video
متغيرات SASS
SASS هي لغة امتداد لـ CSS تتيح لك كتابة CSS بطريقة أكثر مرونة وكفاءة۔ من بين ميزاتها، المتغيرات هي أداة قوية للحفاظ على اتساق الأسلوب مع تسهيل إجراء التغييرات۔
ما هي متغيرات SASS؟
توفر متغيرات SASS طريقة لتخزين القيم مثل الألوان وأحجام الخط والمسافات المستخدمة بكثرة في CSS، مما يتيح إدارتها من مكان واحد۔
من خلال استخدام المتغيرات، يمكنك تغيير الأنماط بسهولة وتحسين قابلية قراءة الكود۔
كيفية كتابة المتغيرات
يمكن كتابة المتغيرات كما يلي۔
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- يجب أن تبدأ اسم المتغير برمز
$۔ variable-nameهو اسم المتغير۔ يُوصى بإعطائه اسمًا واضحًا ووصفيًا۔valueهي القيمة المعينة للمتغير۔
الاستخدام الأساسي للمتغيرات
فيما يلي مثال أساسي على متغير SASS۔
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- بمجرد تعريف متغير مثل
$primary-color، يمكنك إعادة استخدام نفس القيمة عدة مرات كما تشاء۔ - عند تغيير قيمة، يتعين عليك فقط تعديل تعريف المتغير، مما يُحسّن سهولة صيانة الكود۔
الناتج الناتج عن تحويل SASS إلى CSS
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}استخدام المتغيرات داخل التداخلات
يُسهم الجمع بين التداخلات في SASS والمتغيرات في تنظيم الكود وجعله أكثر سهولة في الإدارة۔
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- يمكنك استخدام المتغيرات داخل المحددات المتداخلة۔
- من خلال الجمع بين المتغيرات، يمكنك تحقيق تنسيقات مرنة، مثل جعل لون ما أغمق بنسبة 10٪ باستخدام دالة
color.adjust۔
الناتج الناتج عن تحويل SASS إلى CSS
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}متغيرات بقيم افتراضية
في SASS، يمكنك تعيين قيم افتراضية للمتغيرات۔ تعيين القيم الافتراضية يتيح لك استخدام المتغيرات دون الكتابة فوق القيم الموجودة مسبقًا۔
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}- من خلال إضافة
!default، لن يتم استبدال المتغير إذا كان قد تم تعريفه بالفعل۔ - يعد هذا مفيدًا في تطوير الفريق أو لإعدادات المشروع بالكامل۔
الناتج الناتج عن تحويل SASS إلى CSS
1p {
2 font-size: 16px;
3}نطاق المتغير
متغيرات SASS لها نطاق وتوافرها يعتمد على مكان تعريفها۔ فهم نطاق المتغيرات يساعد في منع استبدال المتغيرات عن غير قصد۔
- النطاق العام
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- المتغيرات في النطاق العام متاحة في جميع أنحاء الملف۔
- النطاق المحلي
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- المتغيرات في النطاق المحلي متاحة فقط ضمن تداخل معين أو ملف محدد۔
استخدام المتغيرات في العمليات الحسابية
يمكن أيضًا استخدام متغيرات SASS في العمليات الحسابية۔ يمكن إجراء العمليات الحسابية أيضًا على القيم التي تحتوي على وحدات أو على الألوان۔
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}الناتج الناتج عن تحويل SASS إلى CSS
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- استخدام المتغيرات لضبط الألوان أو حساب المسافات يُحسن من سهولة إدارة الكود۔
الملخص
متغيرات SASS هي ميزة أساسية لإدارة وصيانة CSS بكفاءة۔
استخدام متغيرات SASS يساعد على الحفاظ على اتساق الأنماط في جميع أنحاء المشروع ويسهل إجراء التغييرات۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔