ساس @mixin اور @include

Sass Mixin

@mixin ਸਿਫਾਰਸ਼ ਵਾਲੇ ਹਨ ਤੁਹਾਨੂੰ ਪੂਰੇ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਦੁਹਰਾਏ ਜਾ ਸਕਣ ਵਾਲੇ CSS ਕੋਡ ਸਿਰਜਤ ਕਰਨ ਲਈ

ਸਿਰਜਣਾ @include ਸਿਫਾਰਸ਼ ਵਾਲੇ ਹਨ ਤੁਹਾਨੂੰ mixin ਦਾ ਉਪਯੋਗ (ਹਵਾਲਾ) ਕਰਨ ਲਈ

Mixin ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ

mixin ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ @mixin ਸਿਫਾਰਸ਼ ਵਾਲੇ ਹਨ

Sass @mixin ਗਰੰਥਾਂਕਰਨ:

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

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

سی سی ایس گرامر:

@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;
{}

اس لئے، اگر آپ اصل بنیادی mixin کو شامل کرنا چاہتے ہیں تو:

سی سی ایس گرامر:

.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;
{}

Mixin میں دیگر mixin بھی شامل کی جاسکتا ہے:

سی سی ایس گرامر:

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

متغیر کو mixin کو پاس دینا

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

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

سی سی ایس گرامر:

/* دو پارامٹر والا 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 متغیر کے لئے اصل قیمت تخصیص کرسکتا ہے:

سی سی ایس گرامر:

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

بعد ازاں، آپ کو صرف مشتمل کئے جانے کی مدد سے تبدیل کرنا ہوگا:

سی سی ایس گرامر:

.مائی تیپس {
  @include bordered($کولر: نارنجی);
{}

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

مکسن کا ایک اور اچھا استعمال (بھراؤ گرڈر) سپلائر پرفیکسز ہوتا ہے۔

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

سی سی ایس گرامر:

@mixin ترفوم($پروپرٹی) {
  -webkit-ترفوم: $پروپرٹی;
  -ms-ترفوم: $پروپرٹی;
  ترفوم: $پروپرٹی;
{}
.مائی باکس {
  @include ترفوم(رینٹ(20درجہ));
{}

کمپائل کئے جانے کے بعد، سی ایس ایس جیسا نمودار ہوگا:

سی ایس ایس گرامر:

.مائی باکس {
  -webkit-ترفوم: رینٹ(20درجہ);
  -ms-ترفوم: رینٹ(20درجہ);
  ترفوم: رینٹ(20درجہ);
{}