Sass @extend and Inheritance

extend@ و وراثت

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

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

در کد زیر ابتدا یک طراحی پایه را برای عنصر button که برای بیشتر آن‌ها استفاده می‌شود انجام داده‌ایم. سپس یک طراحی برای دکمه Report و طراحی دیگری برای دکمه Submit انجام داده‌ایم. هر دوی این دکمه‌ها خصوصیات CSS را از کلاس button-basic. از طریق دستور @extend به ارث می‌برند. به علاوه رنگ‌های مخصوص به خود را نیز دارند.

.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:

.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 خود ندارید. برای مثال به جای نوشتن دو کلاس برای دکمه Report به صورت زیر:


                  <button class="button-basic button-report">Report</button>

تنها کافی است که کلاس button-report. را برای داشتن هر دو طراحی بنویسید.

<< مبحث قبلی مبحث بعدی >>