٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش قوانین و خصوصیات تو در تو ساس

Sass Nested Rules Sass به شما اجازه می دهد انتخابگرهای CSS را به همان روشی که HTML در آن قرار دارید لانه کنید. به یک نمونه از کد Sass برای پیمایش سایت نگاه کنید: مثال نحو SCSS: nav { ul…

محمد یوسفی

17 جولای 2021

Sass Nested Rules

Sass به شما اجازه می دهد انتخابگرهای CSS را به همان روشی که HTML در آن قرار دارید لانه کنید.

به یک نمونه از کد Sass برای پیمایش سایت نگاه کنید:

مثال

نحو SCSS:

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

توجه داشته باشید که در بی احترامی صحبت کردن، به ul، liو aانتخابگرهای در داخل تو در تو navانتخاب.

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

نحو 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 Nested Properties

بسیاری از ویژگی های CSS دارای پیشوند یکسانی هستند ، مانند font-family ، font-size و font-weight یا متن-align ، text-transform و text-overflow.

با Sass می توانید آنها را به عنوان خصوصیات تو در تو بنویسید:

مثال

نحو SCSS:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

فرستنده Sass موارد فوق را به CSS معمولی تبدیل می کند:

خروجی CSS:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها