آموزش extend

دستورالعمل Sassextend

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

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

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

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

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