ساس اشارتی فونکشن

Sass @extend ਨਿਰਦੇਸ਼

@extend ਨਿਰਦੇਸ਼ ਇੱਕ ਸਮੂਹ ਵਿੱਚ ਦੋਵੇਂ ਚੋਣਕਰਤਾਵਾਂ ਦੇ ਸਾਰੇ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਦੂਜੇ ਚੋਣਕਰਤਾ ਵਿੱਚ ਸ਼ੇਅਰ ਕਰਨ ਦੀ ਪ੍ਰਵਾਨਗੀ ਦਿੰਦਾ ਹੈ。

ਅਗਰ ਤੁਹਾਡੇ ਕੋਲ ਕਿਸੇ ਦੋਹਾਂ ਦੇ ਕਿਸੇ ਵੀ ਵਰਗ ਦੇ ਇਕੱਲੇ ਵਰਗ ਦੇ ਸਮਾਨ ਵਰਗ ਦੇ ਇਲਾਵਾ ਕੁਝ ਛੋਟੇ ਵੇਰਵਿਆਂ ਵਿੱਚ ਵੱਖਰੇ ਹਨ ਤਾਂ @extend ਨਿਰਦੇਸ਼ ਬਹੁਤ ਲਾਭਦਾਇਕ ਹਨ。

ਹੇਠ ਲਿਖੇ Sass ਉਦਾਹਰਣ ਵਿੱਚ ਪਹਿਲਾਂ ਬਟਨ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਸਟਾਈਲ ਬਣਾਇਆ ਗਿਆ ਹੈ (ਇਹ ਮਿਆਦੀ ਬਟਨਾਂ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ)। ਫਿਰ ਅਸੀਂ "Report" ਬਟਨ ਲਈ ਇੱਕ ਸਟਾਈਲ ਬਣਾਇਆ ਹੈ ਅਤੇ "Submit" ਬਟਨ ਲਈ ਇੱਕ ਸਟਾਈਲ ਬਣਾਇਆ ਹੈ। "Report" ਅਤੇ "Submit" ਬਟਨ ਦੋਵੇਂ @extend ਨਿਰਦੇਸ਼ ਨੇ .button-basic ਵਰਗ ਦੇ ਸਾਰੇ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਵਾਲੀਆਂ ਕੀਤੀਆਂ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ ਉਹ ਆਪਣੇ ਆਪ ਦੇ ਰੰਗ ਵੀ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ:

SCSS ਗਿਆਨਿਕਾਰਣ:

.button-basic  {
  بوردر: نہیں;
  پیڈنگ: 15 پوائنٹ 30 پوائنٹ;
  تکوٹا: مرکزی;
  فونٹ سائز: 16 پوائنٹ;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  پرینک رنگ: رد;
}
.button-submit  {
  @extend .button-basic;
  پرینک رنگ: گرین;
  رنگ: وائٹ;
}

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

سی ایس ایس خروجی:

.button-basic, .button-report, .button-submit {
  بوردر: نہیں;
  پیڈنگ: 15 پوائنٹ 30 پوائنٹ;
  تکوٹا: مرکزی;
  فونٹ سائز: 16 پوائنٹ;
  cursor: pointer;
}
.button-report  {
  پرینک رنگ: رد;
}
.button-submit  {
  پرینک رنگ: گرین;
  رنگ: وائٹ;
}

استفاده کے ذریعے @extend امر، آپ کو ایچ تی ایم ال کد میں عناصر کی کئی کلاسوں کی تعین نہیں کرنا پڑتی، مثلاً:<button class="button-basic button-report">Report this</button>۔آپ کو صرف .button-report کی تعین کرنا چاہئیے تاکہ دو توپوں کا ستیل حاصل ہو۔

@extend امر، آپ کا ساس کد بہت چٹا رکھنا مدد کرتا ہے (DRY)۔