آموزش Sass

آموزش طراحی وب سایت با استفاده از Sass

شما با دیرکتیو @mixin میتوانید کدهای CSS خود را در هرجای وب سایت استفاده کنید.

شما با دیرکتیو @include میتوانید از 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;
}
 

استفاده از mixin

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

 
selector {
  @include mixin-name;
}
 

بنابراین mixin بالا بصورت زیر استفاده میشود:

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

sass کدهای بالا را به CSS تبدیل میکند:

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

mixin میتواند شامل چندین mixin دیگر باشد:

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

انتقال متغیر به mixin

در mixin میتوان آرگومان تعریف کرد. با این شیوه میتوانید به mixin متغیر منتقل کنید.

مثال زیر نشان میدهد که چگونه میتوان mixin با آرگومان تعریف کرد:

 
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px;);
}
.myNotes {
  @include bordered(red, 2px);
}
 

مقدار پیشفرض برای mixin

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

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

بنابراین، تنها متغیری را که قصد تغییر آنرا دارید در mixin می آورید:

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

استفاده از mixin برای Vendor Prefixes

یکی از کاربردهای mixin برای Vendor Prefixes میباشد:

 
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
 
 
.myBox {
  @include transform(rotate(20deg));
}
 
 
.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
 
نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    sass یک پیش پردازنده برای CSS است که از تکرار کدهای CSS جلوگیری میکند.

    Read More

  • نصب Sass +

    sass پیش پردازنده CSS است که میتوان استایل شیت را شخصی سازی و مدیریت کند و میتواند بر روی تمامی

    Read More

  • Sass - متغیرها +

    به کمک متغیر میتوان اطلاعات را ذخیره و استفاده کرد.

    Read More

  • Sass - قوانین تو در تو - Nested Rules +

    sass به شما این امکان را میدهد تا از ویژگی های یک کلاس در یک کلاس دیگر استفاده کنید.

    Read More

  • Sass - Importe - Partials +

    با کمک sass میتوان کدهای CSS را طوری بنویسید که بتوان آنها را در پروژه های بعدی نیز استفاده کنید.

    Read More

  • Sass - Mixins - Include +

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

    Read More

  • Sass - extend +

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

    Read More

  • 1

افراد آنلاین

ما 445 مهمان و بدون عضو آنلاین داریم