ساس @mixin و @include

Sass Mixin

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

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

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

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

ایک مثال میں، "important-text" نام کا mixin بنایا جاتا ہے:

SCSS زبان:

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

مشورہ:

Sass میں منفی علامت اور مینگار کا مشورہ: منفی علامت اور مینگار ایک ساتھ شمار کئے جاتے ہیں۔

یعنی @mixin important-text { } اور @mixin important_text { } یہ ممتاز mixin کے طور پر شمار کئے جاتے ہیں!

Mixin استعمال کرنا

@include این کماند کا استعمال mixin کی دفعات کو استعمال کرنا ہے۔

Sass @include mixin زبان:

selector {
  @include mixin-name;
{}

لذا، اگر نیا تعریف کردہ important-text mixin شامل کریں:

SCSS زبان:

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

Sass تبدیل کار نکال کا کا اشارہ دے گا:

CSS نکال:

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

Mixin دوسرے mixin کا حصہ بھی بن سکتا ہے:

SCSS زبان:

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

متغیرات کو Mixin کو بھیجنا

Mixins پارامتر قبول کرتے ہیں۔ اس طریقے سے، آپ mixin کو متغیرات کی وسیلہ سے پرسکتے ہیں۔

درج ذیل، پارامتر والا mixin کا تعریف کرنے کا طریقہ ہے:

SCSS زبان:

/* دو پارامتر والا mixin کا تعریف */
@mixin bordered($color, $width) {
  border: $width solid $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // دو مقادیر والا mixin کو سوال کیا جانا
{}
.myNotes {
  @include bordered(red, 2px); // دو مقادیر والا mixin کو سوال کیا جانا
{}

لطفاً دیکھیئے، پارامتر متغیر کے طور پر قائم کئے گئے ہیں، اور وہیں فریم کی خاصیت کا مقصد (رنگ اور چوڑائی) کے طور پر استعمال کئے گئے ہیں。

پیش کیا جانے کے بعد، 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;
{}

آپ کو صرف mixin استعمال کے وقت تبدیل کرنا چاہئیگا:

SCSS زبان:

.myTips {
  @include bordered($color: نارنجی);
{}

Mixin کا استعمال سپلائر پریفکس کے طور پر

Mixin کا ایک اور اچھا استعمال (بھرنوآلی بائی) سپلائر پریفکس کے طور پر ہوتا ہے۔

یہ ایک تبدیل کا مثال ہے:

SCSS زبان:

@mixin ترفیم($property) {
  -webkit-ترفیم: $property;
  -ms-ترفیم: $property;
  ترفیم: $property;
{}
.myBox {
  @include ترفیم(چرخش(20درجہ));
{}

ترجیحی طور پر، CSS ایسا بنائیگا:

CSS زبان:

.myBox {
  -webkit-ترفیم: چرخش(20درجہ);
  -ms-ترفیم: چرخش(20درجہ);
  ترفیم: چرخش(20درجہ);
{}