آموزش Sass

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

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

اگر المان هایی دارید که به لحاظ ظاهری تفاوتهای کمی دارند دیرکتیو @extend گزینه مناسبی است.

در مثال زیر ابتدا برای دکمه ها استایل کلی تعریف میکنیم. سپس برای دکنه "report" و "submit" استایل تعریف میکنیم. هردو دکمه "report" و "submit" از طریق دیرکتیو @extand از استایل های کلاس .button.basic ارث بری میکنند.

 
.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: centerl
  font-size: 16px;
  cursor: pointer;
}
 
.button-report {
  @extend .button-basic;
  background-color: red;
}
 
.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}
 

پس از کامپایل فایل، 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;
}
 

نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    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

افراد آنلاین

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