الخلطات: إنشاء كتل أنماط قابلة لإعادة الاستخدام

الخلطات: إنشاء كتل أنماط قابلة لإعادة الاستخدام

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

ما هي الخلطات ولماذا نستخدمها؟

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

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

صيغة @mixin و @include

لإنشاء خلطة، استخدم توجيه @mixin متبوعاً باسم. لاستخدام خلطة، استخدم توجيه @include متبوعاً باسم الخلطة.

// تعريف خلطة
@mixin mixin-name {
  // خصائص CSS هنا
}

// استخدام الخلطة
.selector {
  @include mixin-name;
}

خلطات بسيطة (بدون معاملات)

أبسط الخلطات لا تأخذ أي معاملات - فهي تُخرج نفس CSS في كل مرة يتم استخدامها.

// تعريف الخلطات
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// استخدام الخلطات
.nav {
  @include reset-list;
}

.container {
  @include flex-center;
  height: 100vh;
}

.row {
  @include clearfix;
}

// CSS المترجم
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

خلطات بمعاملات

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

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// الاستخدام
.box {
  @include border-radius(10px);
}

.button {
  @include border-radius(4px);
}

// CSS المترجم
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin position($position, $top, $right, $bottom, $left) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// الاستخدام
.square {
  @include size(100px, 100px);
}

.overlay {
  @include position(absolute, 0, 0, 0, 0);
}

// CSS المترجم
.square {
  width: 100px;
  height: 100px;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

قيم المعاملات الافتراضية

يمكنك توفير قيم افتراضية لمعاملات الخلطة. إذا لم يتم تمرير قيمة عند تضمين الخلطة، يتم استخدام القيمة الافتراضية.

@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
  -webkit-transition: $property $duration $timing;
}

// الاستخدام - جميع المعاملات مقدمة
.button-1 {
  @include transition(color, 0.5s, linear);
}

// الاستخدام - استخدام بعض القيم الافتراضية
.button-2 {
  @include transition(background, 0.2s);
  // $timing يستخدم القيمة الافتراضية: ease
}

// الاستخدام - استخدام جميع القيم الافتراضية
.button-3 {
  @include transition;
  // يستخدم: all 0.3s ease
}

// CSS المترجم
.button-1 {
  transition: color 0.5s linear;
  -webkit-transition: color 0.5s linear;
}

.button-2 {
  transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
}

.button-3 {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

معاملات الكلمات الرئيسية

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

@mixin box($width: 100px, $height: 100px, $bg: white, $border: 1px solid black) {
  width: $width;
  height: $height;
  background: $bg;
  border: $border;
}

// معاملات موضعية
.box-1 {
  @include box(200px, 150px, blue, 2px solid red);
}

// معاملات الكلمات الرئيسية (الترتيب لا يهم)
.box-2 {
  @include box($bg: yellow, $width: 300px);
  // $height و $border يستخدمان القيم الافتراضية
}

// مزيج من الموضعية والكلمات الرئيسية
.box-3 {
  @include box(250px, $bg: green);
  // $height يستخدم القيمة الافتراضية، $border يستخدم القيمة الافتراضية
}

// CSS المترجم
.box-1 {
  width: 200px;
  height: 150px;
  background: blue;
  border: 2px solid red;
}

.box-2 {
  width: 300px;
  height: 100px;
  background: yellow;
  border: 1px solid black;
}

.box-3 {
  width: 250px;
  height: 100px;
  background: green;
  border: 1px solid black;
}

معاملات متغيرة (...)

في بعض الأحيان تريد خلطة لقبول أي عدد من المعاملات. استخدم صيغة ... لإنشاء قوائم معاملات متغيرة الطول.

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
  -moz-box-shadow: $shadows;
  box-shadow: $shadows;
}

// الاستخدام مع ظل واحد
.card-1 {
  @include box-shadow(0 2px 4px rgba(0,0,0,0.1));
}

// الاستخدام مع ظلال متعددة
.card-2 {
  @include box-shadow(
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1)
  );
}

// CSS المترجم
.card-1 {
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-2 {
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}

@mixin prefix($property, $value, $prefixes: webkit moz ms o) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

// الاستخدام
.element {
  @include prefix(transform, rotate(45deg));
}

// CSS المترجم
.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

كتل @content

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

@mixin important {
  // أنماط داخل الخلطة
  color: red;
  font-weight: bold;

  // أدخل كتلة المحتوى هنا
  @content;
}

// الاستخدام
.alert {
  @include important {
    // يتم إدراج هذا المحتوى حيث يظهر @content
    background: yellow;
    padding: 10px;
  }
}

// CSS المترجم
.alert {
  color: red;
  font-weight: bold;
  background: yellow;
  padding: 10px;
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 480px) {
      @content;
    }
  }
  @else if $breakpoint == tablet {
    @media (max-width: 768px) {
      @content;
    }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

// الاستخدام
.sidebar {
  width: 300px;

  @include respond-to(tablet) {
    width: 200px;
  }

  @include respond-to(mobile) {
    width: 100%;
  }
}

// CSS المترجم
.sidebar {
  width: 300px;
}

@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 100%;
  }
}

حالات استخدام شائعة للخلطات

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.container {
  @include flex-center;
}

.vertical {
  @include flex-center(column);
}

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.row {
  @include clearfix;
}

@mixin transition($properties...) {
  @if length($properties) == 0 {
    transition: all 0.3s ease;
  } @else {
    transition: $properties;
  }
}

.button {
  @include transition(background 0.3s ease, color 0.3s ease);
}

.link {
  @include transition; // يستخدم الافتراضي
}

@mixin responsive-font($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
  font-size: $min-size;

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

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

h1 {
  @include responsive-font(24px, 48px);
}

@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: "";
    display: block;
    padding-top: ($height / $width) * 100%;
  }

  & > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.video-container {
  @include aspect-ratio(16, 9);
}

.square {
  @include aspect-ratio(1, 1);
}

@mixin truncate($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.single-line {
  @include truncate;
}

.multi-line {
  @include truncate(3);
}

مثال من العالم الحقيقي: نظام خلطة الأزرار

// أنماط الأزرار الأساسية
@mixin button-base {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;

  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// شكل لون الزر
@mixin button-variant($bg-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;

  &:hover:not(:disabled) {
    background: darken($bg-color, 10%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba($bg-color, 0.3);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba($bg-color, 0.3);
  }
}

// شكل حجم الزر
@mixin button-size($padding, $font-size) {
  padding: $padding;
  font-size: $font-size;
}

// الاستخدام
.btn {
  @include button-base;
  @include button-variant(#3498db);
}

.btn-success {
  @include button-base;
  @include button-variant(#2ecc71);
}

.btn-danger {
  @include button-base;
  @include button-variant(#e74c3c);
}

.btn-large {
  @include button-base;
  @include button-variant(#3498db);
  @include button-size(15px 30px, 18px);
}

.btn-small {
  @include button-base;
  @include button-variant(#3498db);
  @include button-size(5px 10px, 14px);
}