دستورالعمل Sass @extend(Sass @extend Directive)


دستورالعمل @extend به شما امکان می دهد مجموعه ای را به اشتراک بگذارید
ویژگی های CSS از یک انتخابگر به انتخابگر دیگر.


دستورالعمل @extend مفید است اگر
شما عناصری تقریباً یکسان دارید که فقط در برخی از آنها متفاوت است
جزئیات کوچک.


مثال Sass زیر ابتدا یک سبک پایه برای دکمه ها ایجاد می کند (این
سبک خواهد بود
برای اکثر دکمه ها استفاده می شود). سپس، یک استایل برای دکمه "گزارش" و یکی ایجاد می کنیم
سبک برای دکمه "ارسال". هر دو دکمه "گزارش" و "ارسال" همه موارد را به ارث می برند
ویژگی های CSS از کلاس .button-basic، از طریق دستورالعمل @extend. که در
علاوه بر این، آنها رنگ های خود را تعریف می کنند:



SCSS Syntax:



.button-basic  {
  border: none;
  padding: 15px 30px;
 
text-align: center;
  font-size: 16px;
  cursor: pointer;
}


.button-report  {
  @extend .button-basic;
 
background-color: red;
}

.button-submit  {
  @extend
.button-basic;
  background-color: green;
  color: white;
}





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



CSS Output:



.button-basic, .button-report, .button-submit {
  border: none;
 
padding: 15px 30px;
  text-align: center;
  font-size: 16px;
 
cursor: pointer;
}


.button-report  {
  background-color: red;
}


.button-submit  {
  background-color: green;
  color:
white;
}





با استفاده از دستورالعمل @extend، نیازی به
چندین کلاس برای یک عنصر در کد HTML خود مشخص کنید، مانند این: دکمه <
class="button-basic button-report">این را گزارش کنید</button>. شما فقط باید .button-report را مشخص کنید تا هر دو مجموعه سبک را دریافت کنید.



دستورالعمل @extend کمک می‌کند کد Sass شما بسیار خشک بماند.