أساسيات صيغة SCSS وأول ملف أنماط

أساسيات صيغة SCSS وأول ملف أنماط

الآن بعد أن تم تثبيت SASS وإعداد بيئتك، حان الوقت للغوص بعمق في صيغة SCSS! في هذا الدرس، سنستكشف قواعد الصيغة الأساسية لـ SCSS، ونفهم كيف ترتبط بـ CSS، ونكتب أول ملف أنماط شامل يوضح قوة SASS.

SCSS: مجموعة فائقة من CSS

أهم شيء يجب فهمه حول SCSS هو أنها مجموعة فائقة من CSS. هذا يعني:

• كل ملف CSS صالح هو أيضاً ملف SCSS صالح
• يمكنك نسخ ولصق CSS في ملف SCSS وسيعمل
• يمكنك إضافة ميزات SASS تدريجياً دون إعادة كتابة كل شيء
• منحنى التعلم ضئيل إذا كنت تعرف CSS بالفعل

امتدادات الملفات: .scss مقابل .sass

تدعم SASS صيغتين مختلفتين بامتدادات ملفات مختلفة:

ملفات .scss (Sassy CSS)

• تستخدم أقواساً {} وفواصل منقوطة ;
• تبدو وتبدو مثل CSS مع ميزات إضافية
• معيار الصناعة - يستخدم في 95%+ من المشاريع
• أسهل في التعلم والدمج مع CSS الموجود

$primary: #3498db;

.button {
  background: $primary;
  padding: 10px 20px;

  &:hover {
    background: darken($primary, 10%);
  }
}

ملفات .sass (الصيغة المسننة)

• لا أقواس أو فواصل منقوطة - تستخدم المسافات البادئة (مثل Python)
• أكثر إيجازاً لكن أقل ألفة
• نادراً ما تستخدم في المشاريع الحديثة
• لا يمكن مزجها مع CSS - تتطلب إعادة كتابة كاملة

$primary: #3498db

.button
  background: $primary
  padding: 10px 20px

  &:hover
    background: darken($primary, 10%)

التعليقات في SCSS: سطر واحد ومتعدد الأسطر

تدعم SCSS نوعين من التعليقات، وتتصرف بشكل مختلف أثناء الترجمة:

تعليقات سطر واحد (//)

تستخدم تعليقات السطر الواحد شرطتين مائلتين ويتم إزالتها تماماً من ناتج CSS المترجم. إنها مثالية لملاحظات المطور التي لا ينبغي أن تظهر في الإنتاج.

// هذا تعليق سطر واحد
// لن يظهر في CSS المترجم

$primary: #3498db; // التعليق المضمن يعمل أيضاً

.button {
  // TODO: إضافة المزيد من أنماط الأزرار لاحقاً
  background: $primary;
}

تعليقات متعددة الأسطر (/* */)

تستخدم التعليقات متعددة الأسطر صيغة /* */ (تماماً مثل CSS) ويتم الحفاظ عليها في الناتج المترجم (ما لم يتم استخدام النمط المضغوط).

/*
 * هذا تعليق متعدد الأسطر
 * سيظهر في CSS المترجم
 * استخدمه لإشعارات حقوق النشر، التوثيق، إلخ.
 */

.header {
  background: #333; /* هذا التعليق المضمن محفوظ أيضاً */
}

/*
 * هذا تعليق متعدد الأسطر
 * سيظهر في CSS المترجم
 * استخدمه لإشعارات حقوق النشر، التوثيق، إلخ.
 */
.header {
  background: #333; /* هذا التعليق المضمن محفوظ أيضاً */
}

كتابة أول ملف SCSS

دعنا نكتب ملف SCSS شامل يوضح الميزات الأساسية. أنشئ ملفاً باسم styles.scss:

// ===========================================
// المتغيرات
// ===========================================

// الألوان
$primary-color: #3498db;
$secondary-color: #2ecc71;
$danger-color: #e74c3c;
$text-color: #333;
$light-gray: #ecf0f1;

// الطباعة
$font-family: 'Helvetica Neue', Arial, sans-serif;
$base-font-size: 16px;
$heading-font-size: 32px;

// المسافات
$base-padding: 16px;
$base-margin: 16px;

// ===========================================
// الأنماط الأساسية
// ===========================================

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: $font-family;
  font-size: $base-font-size;
  color: $text-color;
  line-height: 1.6;
  padding: $base-padding;
  background-color: $light-gray;
}

// ===========================================
// الطباعة
// ===========================================

h1 {
  font-size: $heading-font-size;
  color: $primary-color;
  margin-bottom: $base-margin;

  // محدد متداخل للتأكيد
  span {
    color: $secondary-color;
    font-weight: normal;
  }
}

p {
  margin-bottom: $base-margin;
  line-height: 1.8;
}

// ===========================================
// المكونات
// ===========================================

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: $base-padding * 2;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button {
  display: inline-block;
  padding: $base-padding / 2 $base-padding;
  background: $primary-color;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: $base-font-size;
  transition: all 0.3s ease;

  // فئة زائفة متداخلة
  &:hover {
    background: darken($primary-color, 10%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  // فئة زائفة متداخلة
  &:active {
    transform: translateY(0);
  }

  // فئة معدلة متداخلة
  &.secondary {
    background: $secondary-color;

    &:hover {
      background: darken($secondary-color, 10%);
    }
  }

  // فئة معدلة متداخلة
  &.danger {
    background: $danger-color;

    &:hover {
      background: darken($danger-color, 10%);
    }
  }
}

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: $base-padding;
  margin-bottom: $base-margin;

  .card-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: $base-margin / 2;
    color: $primary-color;
  }

  .card-body {
    font-size: 14px;
    color: #666;
  }

  .card-footer {
    margin-top: $base-margin;
    padding-top: $base-padding / 2;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #999;
  }
}

الترجمة ومشاهدة الناتج

الآن دعنا نترجم ملف SCSS هذا ونرى ما هي CSS المُنشأة. قم بتشغيل أمر الترجمة:

sass styles.scss styles.css

إليك جزء من ناتج CSS المُنشأ:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  padding: 16px;
  background-color: #ecf0f1;
}

h1 {
  font-size: 32px;
  color: #3498db;
  margin-bottom: 16px;
}
h1 span {
  color: #2ecc71;
  font-weight: normal;
}

.button {
  display: inline-block;
  padding: 8px 16px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.button:hover {
  background: #217dbb;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button:active {
  transform: translateY(0);
}
.button.secondary {
  background: #2ecc71;
}
.button.secondary:hover {
  background: #25a25a;
}
.button.danger {
  background: #e74c3c;
}
.button.danger:hover {
  background: #d62c1a;
}

فهم كيفية تعيين التداخل إلى CSS

واحدة من أقوى ميزات SCSS هي التداخل. دعنا نفهم بالضبط كيف تترجم SCSS المتداخلة إلى CSS:

التداخل الأساسي

.card {
  padding: 20px;

  .card-title {
    font-size: 24px;
  }
}

.card {
  padding: 20px;
}

.card .card-title {
  font-size: 24px;
}

يصبح .card-title المتداخل .card .card-title (محدد تابع).

محدد الأصل (&)

الأمبرساند & هو حرف خاص يشير إلى المحدد الأصل. إنه مفيد بشكل لا يصدق للفئات الزائفة والعناصر الزائفة والمعدلات:

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &:focus {
    outline: 2px solid blue;
  }

  &.active {
    background: navy;
  }

  &::before {
    content: "→";
  }
}

.button {
  background: blue;
}
.button:hover {
  background: darkblue;
}
.button:focus {
  outline: 2px solid blue;
}
.button.active {
  background: navy;
}
.button::before {
  content: "→";
}

مستويات متعددة من التداخل

.navigation {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;
        padding: 10px;

        &:hover {
          color: #3498db;
        }
      }
    }
  }
}

.navigation {
  background: #333;
}
.navigation ul {
  list-style: none;
}
.navigation ul li {
  display: inline-block;
}
.navigation ul li a {
  color: white;
  padding: 10px;
}
.navigation ul li a:hover {
  color: #3498db;
}

استخدام المتغيرات الأساسية مع $

المتغيرات في SCSS تبدأ بعلامة الدولار $. تتيح لك تخزين القيم وإعادة استخدامها في جميع أنحاء ملف الأنماط الخاص بك:

// تصريحات المتغيرات
$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;

// استخدام المتغيرات
body {
  color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2; // المتغيرات تدعم الرياضيات!
}

.header {
  background: $primary-color;
  margin-bottom: $spacing-unit * 3;
}

.button {
  padding: $spacing-unit $spacing-unit * 2;
  font-size: $font-size-base;
}

body {
  color: #3498db;
  font-size: 16px;
  padding: 16px;
}

.header {
  background: #3498db;
  margin-bottom: 24px;
}

.button {
  padding: 8px 16px;
  font-size: 16px;
}

لاحظ كيف يتم استبدال المتغيرات بقيمها الفعلية، ويتم حساب العمليات الرياضية أثناء الترجمة.

إنشاء ملف HTML لاختبار أنماطك

لرؤية CSS المترجمة في العمل، أنشئ ملف HTML بسيط يرتبط بـ CSS المُنشأ:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مشروع SCSS الأول</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>مرحباً بك في <span>SCSS</span></h1>

    <p>هذه الصفحة منسقة بـ CSS مترجمة من SCSS!</p>

    <div class="card">
      <div class="card-header">عنوان البطاقة</div>
      <div class="card-body">
        هذا مكون بطاقة منسق بمحددات SCSS متداخلة.
      </div>
      <div class="card-footer">معلومات تذييل البطاقة</div>
    </div>

    <button class="button">زر أساسي</button>
    <button class="button secondary">زر ثانوي</button>
    <button class="button danger">زر خطر</button>
  </div>
</body>
</html>

افتح ملف HTML هذا في متصفحك، وسترى أنماط SCSS المترجمة في العمل!

مراقبة الملفات أثناء التطوير

بدلاً من الترجمة يدوياً بعد كل تغيير، استخدم وضع المراقبة للترجمة التلقائية:

sass --watch styles.scss:styles.css

الآن في كل مرة تحفظ فيها styles.scss، سيتم تحديث ملف CSS تلقائياً. احتفظ بمتصفحك مفتوحاً وقم بالتحديث لرؤية التغييرات على الفور!

الأخطاء الشائعة للمبتدئين لتجنبها

1. نسيان الفواصل المنقوطة

على عكس صيغة .sass المسننة، تتطلب SCSS فواصل منقوطة:

.button {
  background: blue  // فاصلة منقوطة مفقودة
  color: white
}

.button {
  background: blue;
  color: white;
}

2. سوء استخدام رمز &

يجب استخدام & بعناية - إنه يشير إلى المحدد الأصل بأكمله:

.card {
  & .header {  // ينشئ ".card .header"
    font-size: 20px;
  }
}

// أفضل بدون &:
.card {
  .header {  // ينشئ أيضاً ".card .header"
    font-size: 20px;
  }
}

.button {
  &:hover {     // ينشئ ".button:hover"
  }

  &.active {    // ينشئ ".button.active"
  }

  &-primary {   // ينشئ ".button-primary" (نمط BEM)
  }
}

3. التداخل المفرط

فقط لأنك تستطيع التداخل لا يعني أنه يجب عليك تداخل كل شيء 10 مستويات عمقاً:

.page {
  .container {
    .content {
      .article {
        .heading {
          .title {
            color: blue;
          }
        }
      }
    }
  }
}

// يترجم إلى:
// .page .container .content .article .heading .title { color: blue; }
// محدد جداً جداً!

.article {
  .article-title {
    color: blue;
  }
}

// يترجم إلى: .article .article-title { color: blue; }
// أكثر قابلية للصيانة بكثير!

الخلاصة

أنت الآن تفهم الصيغة الأساسية لـ SCSS! لقد تعلمت أن SCSS مجموعة فائقة من CSS، وكيفية استخدام التعليقات، وكيف يعمل التداخل، وكيفية تصريح واستخدام المتغيرات، وكيفية رؤية ناتج CSS المترجم. هذه الأساسيات هي الأساس لجميع الميزات القوية التي سنستكشفها في الدروس القادمة.

في الدرس التالي، سنغوص بعمق في المتغيرات - أنواع البيانات والنطاق واصطلاحات التسمية وتقنيات المتغيرات المتقدمة.

.navigation { background: #333; }
.navigation .nav-list { list-style: none; }
.navigation .nav-list .nav-item { display: inline-block; }
.navigation .nav-list .nav-item .nav-link { color: white; }
.navigation .nav-list .nav-item .nav-link:hover { color: #3498db; }