دستور extend در Sass [ قسمت شش ]

  • آخرین بروزرسانی در جمعه 12 مارس 2021

    Average rating 5 / 5. Vote count: 1

در قسمت ششم و آخرین قسمت از آموزش Sass به توضیح و بررسی دستور extend می پردازیم.

دستور @extend این امکان را به شما می دهد که تکه ای از خصوصیت های CSS که نوشتید یا در اختیار دارید را در selector های مختلف استفاده کنید.

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

در مثال زیر، یک استایل مبتدی برای دکمه ها می نویسیم (این استایل برای اکثر دکمه ها استفاده می شود). سپس، یک استایل برای دکمه “Report” و یک استایل برای دکمه “Submit” می نویسیم.

هر دو دکمه تمام خصوصیت های کلاس .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 معادل کد Sass بالا به صورت زیر در می آید:

 .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">Report this</button>

اگر از Sass استفاده نکنید. ناچارید برای استایل دهی به یک دکمه مثلا دکمه “گزارش مشکل یا Report” دو کلاس، یک کلاس شامل خصوصیات تمام دکمه ها و یک کلاس مخصوص دکمه Report تعریف کنید.

اما با استفاده از Sass کافی است تا یک بار استایل کلی دکمه ها را بنویسید و سپس برای هر نوع دکمه یک استایل بنویسید و از استایل کلی با استفاده از دستور extend در استایل دکمه های خاص استفاده کنید.

سری آموزش زبان Sass همینجا به پایان می رسد.

البته که ویژگی ها و خصوصیت های این زبان به همینجا پایان نمی یابد و این زبان هنوز توابع و مفاهیم دیگری دارد.

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
برای ثبت سفارش برنامه نویسی، طراحی وب سایت، بهینه سازی و... در کاپ کد کلیک کنید.

دیدگاه خود را بیان کنید

@