أنماط الخلطات المتقدمة

أنماط الخلطات المتقدمة

الآن بعد أن فهمت أساسيات الخلطات، دعنا نستكشف أنماطاً متقدمة ستأخذ مهاراتك في SASS إلى المستوى التالي. تُستخدم هذه الأنماط في قواعد الكود الإنتاجية وأنظمة التصميم لإنشاء حلول تصميم قوية ومرنة وقابلة للصيانة.

خلطات مع @content لنقاط التوقف المتجاوبة

أحد أقوى استخدامات @content هو إنشاء نظام نقاط توقف متجاوب. يتيح لك هذا النمط كتابة استعلامات الوسائط ضمن أنماط المكون الخاص بك، مما يجعل الكود الخاص بك أكثر قابلية للصيانة والقراءة.

// تعريف نقاط التوقف
$breakpoints: (
  'mobile': 480px,
  'tablet': 768px,
  'desktop': 1024px,
  'wide': 1200px
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "نقطة توقف غير معروفة: #{$breakpoint}";
  }
}

// الاستخدام
.container {
  width: 100%;
  padding: 15px;

  @include respond-to(tablet) {
    width: 750px;
    padding: 20px;
  }

  @include respond-to(desktop) {
    width: 970px;
  }

  @include respond-to(wide) {
    width: 1170px;
  }
}

// CSS المترجم
.container {
  width: 100%;
  padding: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

بناء نظام نقاط توقف متجاوب شامل

يجب أن يتعامل نظام نقاط التوقف الجاهز للإنتاج مع استعلامات min-width و max-width، بالإضافة إلى استعلامات النطاق واستعلامات الوسائط المخصصة.

// تعريفات نقاط التوقف
$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
);

// خلطة استعلام الوسائط مع استراتيجيات متعددة
@mixin media($breakpoint, $type: 'min') {
  @if $type == 'min' {
    // الجوال أولاً: min-width
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
  @else if $type == 'max' {
    // سطح المكتب أولاً: max-width
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  }
  @else if $type == 'only' {
    // فقط نطاق نقطة التوقف هذه
    $next-breakpoint: null;
    $breakpoint-keys: map-keys($breakpoints);
    $breakpoint-index: index($breakpoint-keys, $breakpoint);

    @if $breakpoint-index < length($breakpoint-keys) {
      $next-breakpoint: nth($breakpoint-keys, $breakpoint-index + 1);
    }

    @if $next-breakpoint {
      @media (min-width: map-get($breakpoints, $breakpoint)) and (max-width: map-get($breakpoints, $next-breakpoint) - 1px) {
        @content;
      }
    } @else {
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  }
}

// أمثلة الاستخدام
.element {
  // أنماط الجوال الافتراضية
  font-size: 14px;

  // الجهاز اللوحي وأكبر
  @include media(md) {
    font-size: 16px;
  }

  // سطح المكتب الكبير وأكبر
  @include media(xl) {
    font-size: 18px;
  }

  // فقط على الأجهزة اللوحية (نطاق md إلى lg)
  @include media(md, only) {
    background: lightblue;
  }

  // الجوال فقط (نهج max-width)
  @include media(sm, max) {
    display: none;
  }
}

منطق شرطي في الخلطات

يمكن للخلطات استخدام عبارات @if و @else if و @else لإنتاج مخرجات مختلفة بناءً على المعاملات. يتيح لك هذا إنشاء خلطات ذكية وقابلة للتكيف.

@mixin theme-colors($theme) {
  @if $theme == 'light' {
    background-color: white;
    color: #333;
    border-color: #ddd;
  }
  @else if $theme == 'dark' {
    background-color: #333;
    color: white;
    border-color: #666;
  }
  @else if $theme == 'blue' {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
  }
  @else {
    @warn "سمة غير معروفة: #{$theme}. الافتراضي إلى السمة الفاتحة.";
    background-color: white;
    color: #333;
    border-color: #ddd;
  }
}

// الاستخدام
.card-light {
  @include theme-colors(light);
}

.card-dark {
  @include theme-colors(dark);
}

.card-blue {
  @include theme-colors(blue);
}

@mixin button-style($size: medium, $variant: primary, $outline: false) {
  // أنماط أساسية
  display: inline-block;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;

  // أشكال الحجم
  @if $size == small {
    padding: 5px 10px;
    font-size: 12px;
  }
  @else if $size == medium {
    padding: 10px 20px;
    font-size: 14px;
  }
  @else if $size == large {
    padding: 15px 30px;
    font-size: 18px;
  }

  // أشكال الألوان
  $bg-color: null;
  $text-color: white;

  @if $variant == primary {
    $bg-color: #3498db;
  }
  @else if $variant == success {
    $bg-color: #2ecc71;
  }
  @else if $variant == danger {
    $bg-color: #e74c3c;
  }
  @else if $variant == warning {
    $bg-color: #f39c12;
  }

  // محدد مقابل مملوء
  @if $outline {
    background: transparent;
    color: $bg-color;
    border: 2px solid $bg-color;

    &:hover {
      background: $bg-color;
      color: white;
    }
  }
  @else {
    background: $bg-color;
    color: $text-color;

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

// الاستخدام
.btn-small-primary {
  @include button-style(small, primary);
}

.btn-large-danger-outline {
  @include button-style(large, danger, true);
}

خلطات تولد محددات متعددة

يمكن للخلطات المتقدمة إنشاء محددات وقواعد CSS متعددة، مما يخلق أنظمة مكونات كاملة بتضمين واحد.

@mixin generate-spacing-utilities($property, $prefix, $sizes) {
  @each $name, $value in $sizes {
    .#{$prefix}-#{$name} {
      #{$property}: $value;
    }

    // توليد أشكال متجاوبة أيضاً
    @each $breakpoint-name, $breakpoint-value in $breakpoints {
      @media (min-width: $breakpoint-value) {
        .#{$prefix}-#{$breakpoint-name}-#{$name} {
          #{$property}: $value;
        }
      }
    }
  }
}

// تعريف مقياس التباعد
$spacing-scale: (
  '0': 0,
  '1': 0.25rem,
  '2': 0.5rem,
  '3': 0.75rem,
  '4': 1rem,
  '5': 1.5rem,
  '6': 2rem,
  '8': 3rem,
  '10': 4rem
);

// توليد أدوات الهامش
@include generate-spacing-utilities(margin, 'm', $spacing-scale);

// توليد أدوات الحشوة
@include generate-spacing-utilities(padding, 'p', $spacing-scale);

// هذا يولد أصناف مثل:
// .m-0, .m-1, .m-2، إلخ.
// .m-md-0, .m-md-1، إلخ. (أشكال متجاوبة)
// .p-0, .p-1, .p-2، إلخ.
// .p-md-0, .p-md-1، إلخ.

@mixin generate-color-variants($component, $colors) {
  .#{$component} {
    // أنماط المكون الأساسي
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;

    @each $name, $color in $colors {
      &--#{$name} {
        background-color: lighten($color, 40%);
        border-left: 4px solid $color;
        color: darken($color, 20%);

        .#{$component}__title {
          color: $color;
          font-weight: bold;
        }

        .#{$component}__icon {
          color: $color;
        }
      }
    }
  }
}

// تعريف لوحة الألوان
$alert-colors: (
  'info': #3498db,
  'success': #2ecc71,
  'warning': #f39c12,
  'danger': #e74c3c
);

// توليد أشكال مكون التنبيه
@include generate-color-variants('alert', $alert-colors);

// هذا يولد:
// .alert--info, .alert--success, .alert--warning, .alert--danger
// مع أشكال .alert__title و .alert__icon المتداخلة

مكتبات الخلطات والأطر

العديد من أطر وبيبليوثكات CSS الشائعة مبنية باستخدام خلطات SASS. فهم هذه يمكن أن يساعدك في بناء مكتبات مكونات قابلة لإعادة الاستخدام خاصة بك.

@mixin make-container($padding: 15px) {
  width: 100%;
  padding-right: $padding;
  padding-left: $padding;
  margin-right: auto;
  margin-left: auto;
}

@mixin make-row($gutter: 30px) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -($gutter / 2);
  margin-left: -($gutter / 2);
}

@mixin make-col($size, $columns: 12, $gutter: 30px) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
}

// الاستخدام
.container {
  @include make-container;
}

.row {
  @include make-row;
}

.col-6 {
  @include make-col(6);
}

.col-4 {
  @include make-col(4);
}

.col-3 {
  @include make-col(3);
}

الخلطات مقابل @extend مقابل الدوال

فهم متى تستخدم الخلطات أو @extend أو الدوال أمر حاسم لكتابة SASS فعال. لكل منها نقاط قوة وحالات استخدام مناسبة.

// الخلطات - نسخ الأنماط لكل محدد
@mixin button-base {
  padding: 10px 20px;
  border-radius: 4px;
}

.button-1 { @include button-base; }
.button-2 { @include button-base; }

// المترجم (أنماط مكررة):
.button-1 {
  padding: 10px 20px;
  border-radius: 4px;
}
.button-2 {
  padding: 10px 20px;
  border-radius: 4px;
}

// @EXTEND - تجميع المحددات معاً
%button-base {
  padding: 10px 20px;
  border-radius: 4px;
}

.button-1 { @extend %button-base; }
.button-2 { @extend %button-base; }

// المترجم (محددات مجمعة):
.button-1, .button-2 {
  padding: 10px 20px;
  border-radius: 4px;
}

// الدوال - إرجاع قيم
@function calculate-rem($px) {
  @return $px / 16 * 1rem;
}

.element {
  font-size: calculate-rem(18); // 1.125rem
}

بناء نظام خلطة الطباعة

الطباعة حالة استخدام مثالية لنظام خلطة شامل. دعونا نبني نظام طباعة جاهز للإنتاج.

// تكوين الطباعة
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
$font-family-heading: Georgia, "Times New Roman", serif;
$font-family-mono: "Courier New", Courier, monospace;

$font-weights: (
  'light': 300,
  'normal': 400,
  'medium': 500,
  'semibold': 600,
  'bold': 700
);

$type-scale: (
  'xs': 0.75rem,   // 12px
  'sm': 0.875rem,  // 14px
  'base': 1rem,    // 16px
  'lg': 1.125rem,  // 18px
  'xl': 1.25rem,   // 20px
  '2xl': 1.5rem,   // 24px
  '3xl': 1.875rem, // 30px
  '4xl': 2.25rem,  // 36px
  '5xl': 3rem      // 48px
);

// خلطة الطباعة الأساسية
@mixin typography-base {
  font-family: $font-family-base;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// خلطة العنوان
@mixin heading($level: 1) {
  font-family: $font-family-heading;
  font-weight: map-get($font-weights, 'bold');
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5em;

  @if $level == 1 {
    font-size: map-get($type-scale, '5xl');
    @include media(md) {
      font-size: map-get($type-scale, '4xl');
    }
  }
  @else if $level == 2 {
    font-size: map-get($type-scale, '4xl');
    @include media(md) {
      font-size: map-get($type-scale, '3xl');
    }
  }
  @else if $level == 3 {
    font-size: map-get($type-scale, '3xl');
  }
  @else if $level == 4 {
    font-size: map-get($type-scale, '2xl');
  }
  @else if $level == 5 {
    font-size: map-get($type-scale, 'xl');
  }
  @else if $level == 6 {
    font-size: map-get($type-scale, 'lg');
  }
}

// خلطة نمط النص
@mixin text-style($size: 'base', $weight: 'normal', $line-height: null) {
  font-size: map-get($type-scale, $size);
  font-weight: map-get($font-weights, $weight);

  @if $line-height {
    line-height: $line-height;
  }
}

// خلطة النص المتجاوب
@mixin fluid-type($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
  font-size: $min-size;

  @media (min-width: $min-width) {
    font-size: calc(#{$min-size} + (#{strip-unit($max-size)} - #{strip-unit($min-size)}) * ((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)}));
  }

  @media (min-width: $max-width) {
    font-size: $max-size;
  }
}

// دالة مساعدة
@function strip-unit($number) {
  @return $number / ($number * 0 + 1);
}

// الاستخدام
body {
  @include typography-base;
}

h1 { @include heading(1); }
h2 { @include heading(2); }
h3 { @include heading(3); }

.text-small {
  @include text-style('sm', 'normal');
}

.text-large-bold {
  @include text-style('xl', 'bold');
}

.hero-title {
  @include fluid-type(2rem, 4rem);
}

اعتبارات الأداء مع الخلطات

بينما الخلطات قوية، يمكن أن تؤثر على حجم CSS المترجم إذا لم تُستخدم بعناية. فهم الآثار المترتبة على الأداء يساعدك على اتخاذ قرارات أفضل.

// سيء - سيكرر جميع الأنماط 10 مرات
@mixin heavy-component {
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  // ... 50 سطراً أخرى من الأنماط
}

.item-1 { @include heavy-component; }
.item-2 { @include heavy-component; }
// ... item-3 إلى item-10
// النتيجة: ملف CSS ضخم مع أنماط مكررة

// جيد - استخدم @extend أو الأصناف للأنماط المتطابقة
%component-base {
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.item-1 { @extend %component-base; }
.item-2 { @extend %component-base; }
// النتيجة: محددات مجمعة، ملف أصغر

// الأفضل - استخدم الخلطات للأشكال ذات المعاملات
@mixin component-variant($bg-color) {
  background: $bg-color;
  border-color: darken($bg-color, 10%);
}

.item-1 {
  @extend %component-base;
  @include component-variant(blue);
}

.item-2 {
  @extend %component-base;
  @include component-variant(green);
}