مقدمة إلى معالجات CSS و SASS

مقدمة إلى معالجات CSS و SASS

مرحباً بك في عالم معالجات CSS المثير! في هذا الدرس الشامل، سنستكشف ما هي معالجات CSS، ولماذا تم إنشاؤها، وكيف أحدثت SASS (Syntactically Awesome Style Sheets) ثورة في طريقة كتابة وصيانة ملفات الأنماط لتطبيقات الويب الحديثة.

ما هي معالجات CSS؟

معالج CSS هو لغة برمجة نصية توسع قدرات CSS القياسية. يسمح للمطورين بكتابة ملفات الأنماط باستخدام ميزات متقدمة مثل المتغيرات والدوال والـ mixins والتداخل، والتي يتم تحويلها (أو "معالجتها مسبقاً") إلى CSS قياسي يمكن للمتصفحات فهمه.

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

المشكلة مع CSS العادية في المشاريع الكبيرة

قبل الخوض في SASS، دعنا نفهم لماذا تم إنشاء معالجات CSS في المقام الأول. بينما CSS ممتازة لتنسيق صفحات الويب، إلا أنها تحتوي على قيود كبيرة عند العمل على مشاريع واسعة النطاق:

1. لا توجد متغيرات (قبل CSS Custom Properties)

تخيل أن لديك لون علامة تجارية مستخدم في 50 مكاناً مختلفاً عبر ملف الأنماط الخاص بك. إذا احتاج هذا اللون إلى التغيير، يجب عليك البحث واستبداله يدوياً 50 مرة. هذا عرضة للأخطاء ويستغرق وقتاً طويلاً.

/* header.css */
.header {
    background-color: #3498db;
}

.button {
    background-color: #3498db;
}

.link {
    color: #3498db;
}

/* إذا تغير لون العلامة التجارية، تحتاج إلى التحديث في كل مكان! */

2. لا يوجد تداخل

يمكن أن تصبح محددات CSS مطولة ومتكررة، خاصةً عند تنسيق هياكل HTML متداخلة. يجب عليك كتابة المسار الكامل للمحدد في كل مرة، مما يجعل ملف الأنماط أصعب في القراءة والصيانة.

.navigation {
    background: #333;
}

.navigation ul {
    list-style: none;
}

.navigation ul li {
    display: inline-block;
}

.navigation ul li a {
    color: white;
    text-decoration: none;
}

.navigation ul li a:hover {
    color: #3498db;
}

3. لا توجد إعادة استخدام للكود (Mixins)

العديد من أنماط CSS تتكرر في جميع أنحاء المشروع. على سبيل المثال، قد تستخدم نفس تقنية توسيط flexbox، أو قيم border-radius، أو تأثيرات transition عشرات المرات. مع CSS العادية، إما أن تكرر الكود أو تستخدم استراتيجيات فئات متعددة معقدة.

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.popup {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

4. لا توجد عمليات رياضية

CSS لا تسمح لك بإجراء الحسابات بشكل طبيعي. إذا كنت تريد أن يكون عرض العمود نصف عرض الحاوية ناقص بعض الحشو، لا يمكنك التعبير عن هذه العلاقة بسهولة في CSS النقية (calc() يساعد ولكن لديه قيود).

5. لا توجد تنظيم معياري

ملفات CSS الكبيرة تصبح صعبة الصيانة. بينما يمكنك تقسيم CSS إلى ملفات متعددة، كل ملف يتطلب طلب HTTP منفصل، مما يؤثر على الأداء. لا توجد طريقة مدمجة لتنظيم ودمج ملفات CSS بكفاءة.

نظرة عامة على معالجات CSS: SASS و LESS و Stylus

ظهرت عدة معالجات CSS لحل هذه المشكلات. الثلاثة الأكثر شعبية كانت:

LESS (2009)

أنشأها Alexis Sellier، كانت LESS واحدة من أول المعالجات المعتمدة على نطاق واسع. تستخدم JavaScript للمعالجة ولديها صيغة مشابهة جداً لـ CSS. استخدم Bootstrap 3 LESS بشكل مشهور (على الرغم من أن Bootstrap 4+ تحول إلى SASS).

Stylus (2010)

أنشأها TJ Holowaychuk، Stylus هي الأكثر مرونة في الصيغة، مما يسمح لك بالكتابة مع أو بدون أقواس وفواصل ونقاط فاصلة. إنها قوية ولكن أقل اعتماداً على نطاق واسع من SASS.

SASS (2006) - الفائز

أنشأها Hampton Catlin وطورتها Natalie Weizenbaum و Chris Eppstein، أصبحت SASS (Syntactically Awesome Style Sheets) المعيار الصناعي. إنها الأكثر نضجاً وغنية بالميزات ودعماً على نطاق واسع.

تاريخ SASS

فهم تاريخ SASS يساعد على تقدير قراراتها التصميمية وحالتها الحالية:

• 2006: Hampton Catlin ينشئ SASS بصيغة مسننة (بدون أقواس أو فواصل منقوطة)
• 2007: Natalie Weizenbaum تصبح المطورة والمسؤولة الرئيسية
• 2010: تم تقديم صيغة SCSS في الإصدار 3 لجعل SASS أكثر شبهاً بـ CSS
• 2012-2016: Ruby Sass يصبح التنفيذ القياسي
• 2016: LibSass (تنفيذ C++) يكتسب شعبية لأداء أفضل
• 2018: Dart Sass يصبح التنفيذ الرئيسي الرسمي
• 2020: Ruby Sass مهمل رسمياً؛ Dart Sass هو الآن المعيار

صيغة SASS مقابل SCSS: نكهتان، نفس القوة

استخدمت SASS في الأصل صيغة مسننة بدون أقواس أو فواصل منقوطة (مشابهة لـ Python أو YAML). تسمى هذه "صيغة SASS" أو "الصيغة المسننة". ومع ذلك، وجد العديد من المطورين أن هذا غير مألوف وصعب اعتماده من CSS.

في عام 2010، تم تقديم صيغة SCSS (Sassy CSS). تستخدم SCSS الأقواس والفواصل المنقوطة، مما يجعلها مجموعة فائقة من CSS - مما يعني أن كل CSS صالح هو أيضاً SCSS صالح.

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

$primary-color: #3498db

.navigation
  background: $primary-color
  ul
    list-style: none
    li
      display: inline-block
      a
        color: white
        &:hover
          color: lighten($primary-color, 20%)

صيغة SCSS (مثل CSS، ملفات .scss)

$primary-color: #3498db;

.navigation {
  background: $primary-color;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;

        &:hover {
          color: lighten($primary-color, 20%);
        }
      }
    }
  }
}

ما الذي تترجم إليه SASS

من الضروري أن تفهم أن SASS/SCSS لا تعمل في المتصفح. إنها أداة تطوير تترجم إلى CSS قياسي. المتصفحات تفهم CSS فقط، لذا يقوم مترجم SASS بتحويل ملفات .scss الخاصة بك إلى ملفات .css.

$primary: #3498db;
$secondary: #2ecc71;

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

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

  &.secondary {
    background: $secondary;
  }
}

.button {
  background: #3498db;
  padding: 10px 20px;
}

.button:hover {
  background: #217dbb;
}

.button.secondary {
  background: #2ecc71;
}

الفوائد الرئيسية لـ SASS

الآن بعد أن فهمت المشكلات والتاريخ، دعنا نستكشف الميزات القوية التي تجعل SASS لا غنى عنها لتطوير الويب الحديث:

1. المتغيرات

تخزين القيم القابلة لإعادة الاستخدام مثل الألوان والخطوط والمسافات. غيّر مرة واحدة، حدّث في كل مكان.

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$base-spacing: 16px;

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-spacing;
}

2. التداخل

اكتب محددات تعكس بنية HTML الخاصة بك، مما يجعل كودك أكثر قابلية للقراءة والصيانة.

.card {
  padding: 20px;

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

  .card-content {
    p {
      line-height: 1.6;
    }
  }
}

3. الأجزاء والاستيرادات

قسّم CSS الخاص بك إلى ملفات أصغر يمكن إدارتها ودمجها في وقت الترجمة. لا عقوبة على الأداء!

// _variables.scss
$primary: #3498db;

// _buttons.scss
.button {
  background: $primary;
}

// main.scss
@import 'variables';
@import 'buttons';

4. الـ Mixins

أنشئ أجزاء قابلة لإعادة الاستخدام من CSS يمكنك تضمينها في أي مكان. مثل الدوال لأنماطك.

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  @include flex-center;
  width: 500px;
}

.card {
  @include flex-center;
  width: 300px;
}

5. الدوال والعمليات

قم بإجراء الحسابات واستخدم الدوال المدمجة للتلاعب بالألوان والأرقام والسلاسل النصية.

$base-color: #3498db;

.header {
  background: $base-color;
}

.header-light {
  background: lighten($base-color, 20%);
}

.header-dark {
  background: darken($base-color, 15%);
}

6. التمديد/الوراثة

شارك خصائص CSS من محدد إلى آخر، مما يقلل من التكرار.

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-primary {
  @extend %button-base;
  background: blue;
  color: white;
}

.button-secondary {
  @extend %button-base;
  background: gray;
  color: white;
}

7. توجيهات التحكم

استخدم @if و @for و @each و @while لكتابة ملفات أنماط ديناميكية وقابلة للبرمجة.

@for $i from 1 through 12 {
  .col-#{$i} {
    width: 100% / 12 * $i;
  }
}

// ينتج .col-1 حتى .col-12 بعروض مناسبة

لماذا تختار SASS على المعالجات الأخرى؟

بينما LESS و Stylus معالجات قادرة، لدى SASS عدة مزايا:

• النضج: SASS موجودة منذ عام 2006 ومختبرة في ملايين المشاريع
• المجتمع: أكبر مجتمع، معظم الدروس، أفضل دعم للأدوات
• دعم الأطر: Bootstrap و Foundation و Bulma ومعظم الأطر الرئيسية تستخدم SASS
• غنية بالميزات: المزيد من الدوال المدمجة، توجيهات تحكم أفضل، mixins أكثر قوة
• التطوير النشط: Dart Sass يتم صيانتها بنشاط وتحديثها بانتظام
• المعيار الصناعي: معظم إعلانات الوظائف التي تتطلب معالج تحدد SASS

SASS في تطوير الويب الحديث

اليوم، SASS جزء لا يتجزأ من سير عمل تطوير الويب الحديث:

• أدوات البناء: Webpack و Vite و Parcel والأدوات الأخرى لديها دعم SASS مدمج
• الأطر: مشاريع React و Vue و Angular تستخدم عادةً SASS
• مكتبات المكونات: معظم مكتبات مكونات واجهة المستخدم منسقة بـ SASS
• أنظمة التصميم: شركات مثل GitHub و Airbnb و Shopify تستخدم SASS لأنظمة التصميم الخاصة بها

الخلاصة

حولت معالجات CSS، وخاصة SASS، تطوير الويب من خلال حل نقاط الألم الحقيقية في كتابة وصيانة ملفات الأنماط الكبيرة. توفر SASS المتغيرات والتداخل والـ mixins والدوال والعديد من الميزات الأخرى التي تجعل CSS أكثر قوة وقابلية للصيانة وصديقة للمطورين.

في الدرس التالي، سنحصل على خبرة عملية وسنقوم بتثبيت SASS، وإعداد بيئة التطوير الخاصة بك، وكتابة أول كود SCSS لك!

.header { background: #333; }
.header .logo { width: 100px; }
.header .nav { display: flex; }
.header .nav .nav-item { padding: 10px; }
.header .nav .nav-item a { color: white; }