٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش extend

دستورالعمل Sassextend این @extendدستورالعمل به شما امکان می دهد مجموعه ای از ویژگی های CSS را از یک انتخابگر به گزینه دیگر به اشتراک بگذارید. این @extendدستورالعمل در صورتی مفید است که شما عناصر تقریباً یکسانی داشته باشید که فقط در برخی…

محمد یوسفی

17 جولای 2021

دستورالعمل Sassextend

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

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

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

نحو SCSS:

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

.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 خود تعیین کنید ، مانند این: <button class = “button-basic button-report”> گزارش این </ button>. برای بدست آوردن هر دو مجموعه سبک ، فقط باید .button-report را مشخص کنید.

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها