آموزش Sass

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

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

مثال زیر قوانین تو در تو nested rules در sass را نشان میدهد:

 
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
 

در sass، سلکتورهای ul، li و a درون سلکتور nav قرار دارند (are nested).

درحالی که در CSS، قوانین یک به یک تعریف میشوند:

 
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
 

بخاطر ویژگی تو در تو، کدهای sass خواناتر از CSS میباشد.

پراپرتی های تو در تو در sass

خیلی از پراپرتی های CSS پیشوند یکسانی دارند، مانند font-family، font-size و font-weight یا text-aign، text-transform و text-overflow.

در sass میتوانید آنها را بصورت یک پراپرتی تو در تو بنویسید.

 
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  wight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}
 

sass دستورات بالا را به CSS تبدیل خواهد کرد:

 
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weigt: bold;
 
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;
 
نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    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

افراد آنلاین

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