آموزش mixin و include

17 جولای 2021

میکسین های ساس

این @mixinدستورالعمل به شما امکان می دهد کدهای CSS ایجاد کنید که در سراسر وب سایت مورد استفاده مجدد قرار می گیرد.

این @includeدستورالعمل ایجاد شده است تا به شما اجازه دهد از مخلوط استفاده کنید.


تعریف Mixin

مخلوط با @mixinدستورالعمل تعریف شده است .

نحو Sassmixin:

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

مثال زیر مخلوطی به نام “important-text” ایجاد می کند:

نحو SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

نکته: نکته ای در خط و زیر خط در Sass: خط خط و زیر خط یکسان در نظر گرفته می شوند. این بدان معنی است کهmixin important-text {} وmixin important_text {} به عنوان همان مخلوط در نظر گرفته می شوند!


با استفاده از Mixin

از این @includeدستورالعمل برای ترکیب مخلوط استفاده می شود.

Sass @ شامل ترکیب نحو:

selector {
  @include mixin-name;
}

بنابراین ، برای درج متن مهم متن ایجاد شده در بالا:

نحو SCSS:

.danger {
  @include important-text;
  background-color: green;
}

فرستنده Sass موارد فوق را به CSS معمولی تبدیل می کند:

خروجی CSS:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

یک مخلوط می تواند مخلوط های دیگری را نیز شامل شود:

نحو SCSS:

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

عبور متغیرها به Mixin

میکسین ها استدلال ها را می پذیرند. به این ترتیب می توانید متغیرها را به یک mixin منتقل کنید.

در اینجا نحوه تعریف یک مخلوط با آرگومان آورده شده است:

نحو SCSS:

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

توجه داشته باشید که آرگومان ها به عنوان متغیر تنظیم می شوند و سپس به عنوان مقادیر (رنگ و عرض) ویژگی حاشیه استفاده می شوند.

پس از تدوین ، CSS به این شکل خواهد بود:

خروجی CSS:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

مقادیر پیش فرض یک Mixin

همچنین می توان مقادیر پیش فرض را برای متغیرهای mixin تعریف کرد:

نحو SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

سپس ، فقط باید مقادیری را که هنگام وارد کردن مخلوط تغییر می کنند مشخص کنید:

نحو 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);
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.