SASS مقابل CSS الحديث: متى تستخدم ماذا

مقدمة: المشهد المتطور لـ CSS

تطورت CSS بشكل كبير في السنوات الأخيرة، مع دمج العديد من الميزات التي كانت في السابق حصرية للمعالجات المسبقة مثل SASS. الآن تدعم CSS الأصلية الخصائص المخصصة (المتغيرات) والتداخل ووظائف معالجة الألوان والمزيد. هذا يثير سؤالاً مهماً: متى يجب عليك استخدام SASS، ومتى تكون CSS العادية كافية؟ في هذا الدرس الختامي الشامل، سنقارن ميزات CSS الحديثة مع قدرات SASS، ونستكشف نقاط قوتها وقيودها، ونساعدك على اتخاذ قرارات مستنيرة لمشاريعك.

الخصائص المخصصة لـ CSS مقابل متغيرات SASS

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

متغيرات SASS

// محددة في وقت الترجمة
$primary-color: #3498db;
$spacing-base: 16px;

.button {
  background: $primary-color;
  padding: $spacing-base;
}

// بعد الترجمة:
// .button {
//   background: #3498db;
//   padding: 16px;
// }

// يمكن استخدامها في الحسابات
$container-width: 1200px;
$column-count: 12;
$column-width: $container-width / $column-count; // 100px

// نطاق الكتل
.component {
  $local-color: red; // متاح فقط داخل .component
  color: $local-color;
}

الخصائص المخصصة لـ CSS

/* محددة في CSS ومتاحة في وقت التشغيل */
:root {
  --primary-color: #3498db;
  --spacing-base: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing-base);
}

/* يمكن تغييرها باستخدام JavaScript */
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

/* يمكن نطاقها إلى العناصر */
.dark-theme {
  --primary-color: #1a1a1a;
  --text-color: #ffffff;
}

/* يمكن أن يكون لها قيم احتياطية */
.box {
  color: var(--text-color, black); /* تعود إلى الأسود */
}

/* ترث من خلال التسلسل */
.parent {
  --spacing: 20px;
}

.child {
  margin: var(--spacing); /* ترث من الوالد */
}

المقارنة

// استخدم متغيرات SASS عندما:
// ✓ يتم حساب القيمة في وقت البناء (الحسابات، وظائف الألوان)
// ✓ تحتاج إلى التحقق من النوع والتحقق من الصحة
// ✓ القيمة لا تتغير أبداً في وقت التشغيل
// ✓ تقوم ببناء دوال أو حلقات معقدة بالقيم

$grid-columns: 12;
$gutter: 30px;
$column-width: calc(100% / $grid-columns - $gutter);

// استخدم الخصائص المخصصة لـ CSS عندما:
// ✓ قد تتغير القيمة في وقت التشغيل (الثيمات، تفضيلات المستخدم)
// ✓ تحتاج إلى تفاعل JavaScript
// ✓ تريد من القيم أن ترث من خلال DOM
// ✓ تحتاج إلى قيم متجاوبة تتغير لكل نقطة توقف

:root {
  --theme-primary: #3498db;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-primary: #1a1a1a;
  }
}

النهج الهجين

// حدد الألوان في SASS
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-danger: #e74c3c;

// أنشئ خريطة
$colors: (
  'primary': $color-primary,
  'secondary': $color-secondary,
  'danger': $color-danger
);

// أنشئ خصائص مخصصة لـ CSS
:root {
  @each $name, $value in $colors {
    --color-#{$name}: #{$value};
  }
}

// استخدم في CSS
.button {
  background: var(--color-primary); // مرونة وقت التشغيل
}

// لكن احسب الظلال في SASS
.button-light {
  background: lighten($color-primary, 20%); // حساب وقت الترجمة
}

تداخل CSS مقابل تداخل SASS

التداخل الأصلي لـ CSS مدعوم الآن في المتصفحات الحديثة، لكنه يختلف عن تداخل SASS.

تداخل SASS (راسخ)

.card {
  padding: 20px;

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

  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  &--featured {
    border: 2px solid gold;
  }
}

// يترجم إلى:
// .card { padding: 20px; }
// .card .card-title { font-size: 24px; }
// .card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
// .card--featured { border: 2px solid gold; }

تداخل CSS الأصلي (جديد)

/* يتطلب تداخل CSS الأصلي & لمحددات النوع */
.card {
  padding: 20px;

  /* يجب استخدام & قبل محددات العناصر */
  & .card-title {
    font-size: 24px;
  }

  /* الفئات الزائفة تعمل مع أو بدون & */
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  /* المحددات المركبة تتطلب & */
  &.featured {
    border: 2px solid gold;
  }
}

/* اختلافات البناء عن SASS */
.parent {
  /* CSS الأصلية - تتطلب & */
  & .child { }

  /* SASS - & اختياري لمحددات السلف */
  .child { }
}

الاختلافات الرئيسية

// SASS: مرجع ضمني للوالد
.nav {
  .item {  // يعمل - يصبح .nav .item
    color: blue;
  }
}

// CSS الأصلية: مطلوب مرجع الوالد الصريح
.nav {
  & .item {  // مطلوب & لمحددات السلف
    color: blue;
  }
}

// SASS: يمكن أن يكون محدد الوالد في أي مكان
.button {
  .theme-dark & {  // يعمل - يصبح .theme-dark .button
    color: white;
  }
}

// CSS الأصلية: يجب أن يكون محدد الوالد في البداية
.button {
  .theme-dark & {  // غير مدعوم في CSS الأصلية بعد
    color: white;
  }
}

CSS @layer مقابل بنية SASS

توفر طبقات التسلسل في CSS طريقة جديدة لإدارة الخصوصية وتنظيم الأنماط.

CSS @layer

/* حدد ترتيب الطبقة */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer components {
  .button {
    padding: 10px 20px;
  }
}

@layer utilities {
  .mt-4 {
    margin-top: 1rem;
  }
}

/* الطبقات تتسلسل بالترتيب المحدد، بغض النظر عن ترتيب المصدر */

بنية ملف SASS

// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';

@use 'base/reset';
@use 'base/typography';

@use 'components/buttons';
@use 'components/cards';

@use 'utilities/spacing';

/* الترتيب صريح عبر تسلسل الاستيراد */

المقارنة

CSS color-mix() مقابل دوال ألوان SASS

معالجة الألوان هي مجال واحد حيث كلا النهجين لهما نقاط قوة.

دوال ألوان SASS

$primary: #3498db;

.button {
  background: $primary;
  border: 1px solid darken($primary, 10%);

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

// دوال ألوان متقدمة
$color: #3498db;
$lighter: scale-color($color, $lightness: 30%);
$saturated: adjust-color($color, $saturation: 20%);
$transparent: rgba($color, 0.5);

// خلط الألوان
$purple: mix(#ff0000, #0000ff, 50%); // 50% أحمر، 50% أزرق

دالة CSS color-mix() الأصلية

:root {
  --primary: #3498db;
}

.button {
  background: var(--primary);

  /* اخلط مع الأسود للتعتيم */
  border: 1px solid color-mix(in srgb, var(--primary), black 10%);

  &:hover {
    /* اخلط مع الأبيض للتفتيح */
    background: color-mix(in srgb, var(--primary), white 10%);
  }
}

/* يمكن أن يعمل مع أي فضاء لون */
.box {
  background: color-mix(in oklch, red, blue 50%);
}

/* خلط ديناميكي مع متغيرات CSS */
:root {
  --color-a: red;
  --color-b: blue;
  --mix-percent: 30%;
}

.element {
  color: color-mix(in srgb, var(--color-a), var(--color-b) var(--mix-percent));
}

الاختلافات الرئيسية

// استخدم دوال ألوان SASS عندما:
// ✓ بناء نظام تصميم ثابت
// ✓ تحتاج إلى حساب لون متسق في وقت الترجمة
// ✓ تريد السيطرة الكاملة على طرق معالجة الألوان
// ✓ تحتاج إلى دعم المتصفحات القديمة

$brand: #3498db;
$brand-light: lighten($brand, 20%);
$brand-dark: darken($brand, 20%);

// استخدم CSS color-mix() عندما:
// ✓ تحتاج الألوان إلى التغيير ديناميكياً
// ✓ العمل مع ألوان محددة من قبل المستخدم
// ✓ تريد حساب لون في وقت التشغيل
// ✓ تستهدف فقط المتصفحات الحديثة

:root {
  --brand: #3498db;
}

.dynamic-button {
  --button-lightness: 20%; /* يمكن تغييرها عبر JS */
  background: color-mix(in srgb, var(--brand), white var(--button-lightness));
}

استعلامات حاوية CSS: ما لا تستطيع SASS فعله

استعلامات الحاوية هي ميزة ثورية لـ CSS بدون معادل SASS.

/* حدد حاوية */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* استعلم عن الحاوية */
.widget {
  padding: 1rem;
}

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* هذا مستحيل مع SASS - يمكن لـ SASS فقط العمل مع استعلامات وسائط منفذ العرض */

الميزات التي توفرها SASS فقط

على الرغم من تطور CSS، لا تزال SASS تقدم قدرات فريدة.

1. Mixins مع المنطق

@mixin respond-to($breakpoint, $property, $values...) {
  @if $breakpoint == 'mobile' {
    @media (max-width: 767px) {
      #{$property}: $values;
    }
  } @else if $breakpoint == 'tablet' {
    @media (min-width: 768px) and (max-width: 1023px) {
      #{$property}: $values;
    }
  } @else if $breakpoint == 'desktop' {
    @media (min-width: 1024px) {
      #{$property}: $values;
    }
  }
}

.box {
  @include respond-to('mobile', font-size, 14px);
  @include respond-to('desktop', font-size, 18px);
}

/* لا يوجد لدى CSS معادل لهذا النوع من الإخراج المعتمد على المنطق */

2. الحلقات والتكرار

// توليد مساعدات التباعد
$spacings: (0, 4, 8, 12, 16, 20, 24, 32);

@each $size in $spacings {
  .mt-#{$size} { margin-top: #{$size}px; }
  .mb-#{$size} { margin-bottom: #{$size}px; }
  .ml-#{$size} { margin-left: #{$size}px; }
  .mr-#{$size} { margin-right: #{$size}px; }
}

// توليد أعمدة الشبكة
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

/* لا يمكن لـ CSS النقية توليد فئات برمجياً */

3. الدوال مع المنطق المعقد

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@function rem($px) {
  @return #{strip-unit($px) / 16}rem;
}

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

.element {
  font-size: rem(18px); // 1.125rem
  background: tint(#3498db, 20%);
}

/* لا يمكن لـ calc() في CSS أداء هذا المستوى من الحساب */

4. @extend ومحددات النائب

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

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

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

// يترجم إلى:
// .btn-primary, .btn-secondary {
//   display: inline-block;
//   padding: 10px 20px;
//   border-radius: 4px;
//   cursor: pointer;
// }
// .btn-primary { background: blue; color: white; }
// .btn-secondary { background: gray; color: white; }

/* ليس لدى CSS معادل - سيتطلب تصريحات مكررة */

الميزات التي توفرها CSS فقط

1. المتغيرات في وقت التشغيل (الخصائص المخصصة)

كما نوقش سابقاً، يمكن أن تتغير الخصائص المخصصة لـ CSS في وقت التشغيل.

2. طبقات التسلسل (@layer)

التحكم في الخصوصية دون زيادة تعقيد المحدد.

3. استعلامات الحاوية

تصميم متجاوب للمكونات بناءً على حجم الحاوية، وليس منفذ العرض.

4. محدد :has() (محدد الوالد)

/* نمط الوالد بناءً على الأطفال */
.card:has(.card-image) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* نمط بناءً على الأخ */
.menu-item:has(+ .menu-item--active) {
  border-right: none;
}

/* لا يمكن لـ SASS تحديد الآباء - هذا سلوك وقت التشغيل */

5. CSS Subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid; /* يرث شبكة الوالد */
}

/* لا يمكن لـ SASS إنشاء هذه العلاقة - إنها ميزة تخطيط متصفح */

مستقبل معالجات CSS المسبقة

مع تطور CSS، ما الدور الذي ستلعبه المعالجات المسبقة؟

السيناريوهات التي تبقى فيها SASS أساسية

• تحسين وقت البناء: توليد فئات المساعدة، حساب القيم الثابتة
• أنظمة تصميم معقدة: استخدام الخرائط والحلقات والدوال لتوليد أنماط متسقة
• دعم المتصفحات القديمة: ملء ميزات CSS الحديثة للمتصفحات القديمة
• تجربة المطور: Mixins والملفات الجزئية ونظام الوحدة لتنظيم أفضل للكود
• تطوير إطار العمل: Bootstrap و Foundation وغيرها تعتمد على SASS لأنظمة البناء الخاصة بها

السيناريوهات التي تكفي فيها CSS العادية

• مشاريع بسيطة: مواقع صغيرة مع احتياجات تصميم ضئيلة
• التغيير الديناميكي للثيمات: ثيمات قابلة للتخصيص من قبل المستخدم تتغير في وقت التشغيل
• مشاريع حديثة فقط: استهداف المتصفحات الحالية فقط بميزات أصلية
• التحسين التدريجي: استخدام CSS الحديثة مع تدهور رشيق

النهج الهجين الموصى به

أفضل نهج حديث يجمع بين نقاط قوة SASS و CSS:

// استخدم SASS لـ:
// 1. رموز التصميم والحساب في وقت البناء
$color-primary: #3498db;
$spacing-unit: 8px;

// 2. توليد خصائص مخصصة لـ CSS
:root {
  --color-primary: #{$color-primary};
  --spacing-unit: #{$spacing-unit};

  // توليد مقياس التباعد
  @for $i from 0 through 10 {
    --spacing-#{$i}: #{$i * $spacing-unit};
  }
}

// 3. Mixins للأنماط القابلة لإعادة الاستخدام
@mixin card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

// استخدم CSS لـ:
// 1. التغيير في وقت التشغيل
.element {
  color: var(--color-primary); /* يمكن تغييرها مع JS */
  margin: var(--spacing-4);
}

// 2. استعلامات الحاوية
@container (min-width: 400px) {
  .widget {
    display: grid;
  }
}

// 3. المحددات الحديثة
.card:has(.card-image) {
  /* محدد الوالد بناءً على الأطفال */
}

// اجمع كليهما:
.component {
  @include card-shadow; /* SASS mixin */
  background: var(--color-primary); /* متغير CSS */

  @container (min-width: 600px) { /* استعلام حاوية CSS */
    padding: var(--spacing-6);
  }
}

مصفوفة القرار

┌─────────────────────────────┬──────────┬─────────┐
│ الميزة                      │ SASS     │ CSS     │
├─────────────────────────────┼──────────┼─────────┤
│ المتغيرات (ثابتة)          │ ✓ أفضل   │ ○ يعمل │
│ المتغيرات (ديناميكية)      │ ✗ لا     │ ✓ أفضل │
│ التداخل                     │ ✓ أفضل   │ ○ يعمل │
│ معالجة الألوان              │ ✓ أفضل   │ ○ يعمل │
│ Mixins                      │ ✓ فقط    │ ✗ لا    │
│ الدوال                      │ ✓ فقط    │ ○ calc()│
│ الحلقات                     │ ✓ فقط    │ ✗ لا    │
│ @extend                     │ ✓ فقط    │ ✗ لا    │
│ استعلامات الحاوية           │ ✗ لا     │ ✓ فقط   │
│ طبقات التسلسل               │ ✗ لا     │ ✓ فقط   │
│ محدد الوالد :has()          │ ✗ لا     │ ✓ فقط   │
│ التغييرات في وقت التشغيل    │ ✗ لا     │ ✓ فقط   │
│ تكامل JavaScript            │ ✗ لا     │ ✓ فقط   │
│ دعم المتصفح (قديم)          │ ✓ أفضل   │ ○ يختلف│
└─────────────────────────────┴──────────┴─────────┘

✓ = دعم ممتاز
○ = دعم جزئي/محدود
✗ = غير مدعوم

الملخص والخطوات التالية

لقد أكملت الآن برنامج SASS التعليمي! إليك ما تعلمته:

• أساسيات SASS: المتغيرات، التداخل، mixins، الدوال
• الميزات المتقدمة: الحلقات، الشروط، الخرائط، الوحدات
• أنماط البنية: بنية 7-1، BEM، ITCSS
• تكامل أدوات البناء: npm، Webpack، Vite
• أفضل الممارسات وتحسين الأداء
• استراتيجيات الترحيل من CSS العادية
• تطوير المشاريع الواقعية
• CSS الحديثة مقابل SASS: اختيار الأداة المناسبة

تابع رحلة التعلم الخاصة بك

1. بناء مشاريع حقيقية: طبّق ما تعلمته على مواقع ويب فعلية
2. استكشف CSS-in-JS: تعلم styled-components أو Emotion أو Tailwind CSS
3. إتقان PostCSS: فهم نظام إضافات CSS
4. دراسة أنظمة التصميم: تعلم كيف تبني الشركات بنى واجهة مستخدم قابلة للتوسع
5. ابقَ على اطلاع بـ CSS: تابع مواصفات CSS وتحديثات المتصفح
6. ساهم في المصادر المفتوحة: انضم إلى مشاريع قائمة على SASS في GitHub

تهانينا!

لقد أكملت البرنامج التعليمي الشامل لـ SASS/SCSS! أنت الآن لديك المعرفة والمهارات لبناء أوراق أنماط احترافية وقابلة للصيانة باستخدام SASS أو CSS الحديثة أو مزيج من كليهما. تذكر أن الويب يستمر في التطور، وأفضل نهج هو البقاء فضولياً والاستمرار في التعلم وتكييف أدواتك مع المشاكل التي تحلها.

شكراً لك على خوض هذه الرحلة عبر SASS. استمتع بالتصميم! 🎨