آموزش Sass

با استفاده از دیرکتیو @extend میتوان پراپرتی های CSS را با دیگر سلکتورها به اشتراک گذاشت.

اگر المان هایی دارید که به لحاظ ظاهری تفاوتهای کمی دارند دیرکتیو @extend گزینه مناسبی است.

در مثال زیر ابتدا برای دکمه ها استایل کلی تعریف میکنیم. سپس برای دکنه "report" و "submit" استایل تعریف میکنیم. هردو دکمه "report" و "submit" از طریق دیرکتیو @extand از استایل های کلاس .button.basic ارث بری میکنند.

 
.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: centerl
  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;
}