Sass @mixin و @include

Sass Mixin

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

@mixin name {
  property: value;
  property: value;
  ...
{}

السطر التالي ي 创建 mixin يُدعى "important-text":

نحوغة SCSS:

@mixin important-text {
  لون النص: أحمر;
  حجم النص: 25px;
  وزن النص: سميك;
  الحدود: 1px خط أزرق;
{}

نصيحة:

نصائح حول السساس والخطاف: يتم اعتبار السساس والخطاف نفسه.

这意味着 @mixin important-text { } و @mixin important_text { } يعتبر متشابهًا!

استخدام Mixin

@include التعليمات تستخدم لاستدعاء المكسور.

نحو Sass @include mixin:

محدد {
  @include اسم المكسور;
{}

لذلك، إذا كنت ترغب في تضمين mixin important-text المحدد أعلاه:

نحوغة SCSS:

.danger {
  @include important-text;
  لون الخلفية: أخضر;
{}

مستخدم الترجمة Sass سيقوم بتحويل الشيفرة أعلاه إلى CSS عادي:

خرج CSS:

.danger {
  لون النص: أحمر;
  حجم النص: 25px;
  وزن النص: سميك;
  الحدود: 1px خط أزرق;
  لون الخلفية: أخضر;
{}

يمكن للمكسور أيضًا أن يحتوي على مكسورات أخرى:

نحوغة SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
{}

نقل المتغيرات إلى المكسور

تقبل المكسورات المعلمات. بهذه الطريقة، يمكنك نقل المتغيرات إلى المكسور.

إليك كيفية تعريف mixin يحتوي على معلمات:

نحوغة SCSS:

/* تعريف mixin يحتوي على اثنين من المعلمات */
@mixin bordered($color, $width) {
  الحدود: $width خط $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // استدعاء المكسور بثلاثة أرقام
{}
.myNotes {
  @include bordered(red, 2px); // استدعاء المكسور بثلاثة أرقام
{}

لاحظ أن المعلمات تم تعيينها كمتغيرات ثم استخدمت كقيم للخصائص الرفاعية (اللون وعرض الحدود).

بعد التجميع، سيكون CSS كالتالي:

خرج CSS:

.myArticle {
  الحدود: 1px خط أزرق;
{}
.myNotes {
  الحدود: 2px خط أحمر;
{}

القيم الافتراضية للمكسورات

يمكن أيضًا تعريف قيم افتراضية للمتغيرات المكسورة المكسورة:

نحوغة SCSS:

@mixin bordered($color: blue, $width: 1px) {
  الحدود: $width خط $color;
{}

ثم، كل ما تحتاجه هو تحديد القيمة التي تريد تغييرها عند استدعاء mixin:

نحوغة SCSS:

.myTips {
  @include bordered($color: orange);
{}

استخدام mixin كحرف مقدم من قبل المزود

استخدام mixin كحرف مقدم من قبل المزود هو استخدام جيد آخر (مقدم من قبل المزود) للشركات.

هذا مثال على التحويل:

نحوغة SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
{}
.myBox {
  @include transform(rotate(20deg));
{}

بعد التجميع، سيكون CSS كالتالي:

نحوغة CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
{}