دستورات mixin و extend و وراثت در Sass

سومین قسمت از سری آموزشی Sass را با دستورات mixin@ و include@ آغاز می کنیم و سپس به دستور extend@ وراثت در Sass می پردازیم.

آموزش mixin@ و include@ در Sass

دستور mixin@ این امکان را به شما می دهد تا کد CSS را به صورتی که بارها قابل استفاده باشد، بسازید. دستور inlclude@ نیز امکان استفاده از mixin ها را برای شما فراهم می کند.

تعریف یک Mixin

یک Mixin با استفاده از دستور mixin@ تعریف می گردد. ساختار زیر را مشاهده کنید:

@mixin name {
  property: value;
  property: value;
  ...
}

و کد زیر یک mixin با نام "important-text" تولید می کند:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

توجه: در Sass (-) و (_) هر دو یکسان در نظر گرفته می شوند. بنابراین mixin important-text@ و mixin important_text@ هر دو یک چیز یکسانی را بر می گردانند.

ساختار استفاده از دستور Mixin

با استفاده از دستور include@ می توان از mixin ها استفاده کرد. به ساختار زیر توجه کنید:

selector {
  @include mixin-name;
}

بنابراین حالا می توانیم important-text mixin را که بالاتر ساخته شد، در یک فایل Sass دیگر مورد استفاده قرار دهیم:

.danger {
  @include important-text;
  background-color: green;
}

و Sass با ترانسپایل کردن آن را به کد نرمال CSS زیر تبدیل می کند:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

همچنین یک mixin می تواند بقیه mixin ها را شامل شود:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

فرستادن متغیرها به Mixin

Mixin ها آرگومان ورودی را می پذیرند. بدینوسیله شما می توانید متغیرهای مختلفی را به آن بفرستید. در کد مثال زیر نشان داده ایم که چطور یک mixin را همراه با آرگومان ها تعریف کنید:

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

توجه کنید که آرگومان هایی که به عنوان متغیر در نظر گرفته می شوند، از مقدارشان (کد رنگ و مقدار عرض) جهت مقداردهی به ویژگی border استفاده شده است. بعد از تبدیل کد بالا، کد CSS به صورت زیر خواهد بود:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

مقادیر پیش فرض برای یک Mixin

این امکان وجود دارد تا مقادیر پیش فرض را برای متغیرهای mixin تعریف کنید. مانند کد زیر:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

سپس تنها باید مقداری را جهت تغییر مقدار پیش فرض برای آن درنظر بگیرید. کد زیر را مشاهده کنید:

.myTips {
  @include bordered($color: orange);
}

استفاده از Mixin برای Vendor Prefix ها

یک کاربرد مفید دیگر از mixin، در استفاده از vendor prefix ها می باشد. برای مثال کد زیر transform را به عنوان یک vendor prefix و استفاده از mixin را نشان می دهد:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

بعد از تبدیل کد بالا، کد CSS به صورت کد زیر می باشد:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

دستور extend@ وراثت در Sass

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

کد Sass مثال زیر ابتدا یک استایل پایه برای دکمه ها (که برای اکثر دکمه ها استفاده می شود) می سازد. سپس، یک استایل برای دکمه «گزارش گیری» یا «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;
}

بعد از کامپایل شدن کد Sass بالا، کد 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">Report this</button>

شما فقط نیاز دارید که یک کلاس button-report. تعریف کنید و با استفاده از همین کار هر دو مجموعه استایل را دریافت می کنید. دستور extend@ در Sass یکی از ویژگی های مهم را نشان می دهد. extend@ کمک می کند تا کد Sass بسیار خشک نگه داشته شود. خشک نگه داشتن کد به این معناست که این کار در نهایت از تکرار کد CSS جلوگیری می کند.