خصوصیت ها و Rules های تو در تو در Sass [ قسمت سه ]

  • آخرین بروزرسانی در دوشنبه 09 نوامبر 2020

    Average rating 5 / 5. Vote count: 1

در قسمت قبلی از آموزش Sass با متغیر ها آشنا شدیم و اما در قسمت سوم قصد دارید با قابلیت تعریف خصوصیت ها و Rules ها به صورت تو در تو (Nested) آشنا شویم.

در Sass شما این امکان را دارید که Selector های CSS را به صورت تو در تو تعریف کنید؛ درست مثل ساختار یک فایل HTML !

به مثال زیر که کد های Sass برای استایل دهی به منوی ناوبری (Navigation) یک وب سایت نوشته شده است توجه کنید.

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 قرار گرفته اند.

این نمونه ای از Rules تو در تو در Sass است.

در واقع با نوشتن کد بالا می خواهیم فقط به تمام المنت های a و li و ul تعریف شده در داخل المنت nav استایل بدهیم

در حالی که معادل کد بالا در 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;
}

یعنی برای استایل دادن به یک المنت در داخل یک المنت دیگر در CSS می بایست هر بار نام المنت والد را بیاوریم.

تعریف خصوصیت ها به صورت تو در تو

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

مثلا در font-family، font-size و font-weight پیشوند font و در text-align، text-transform و text-overflow پیشوند text یکسان است.

در Sass شما می توانید این خصوصیت ها را به صورت تو در تو تعریف کنید.

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

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

کد بالا در Sass به کد زیر در CSS تبدیل می شود.

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

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

به این ترتیب همچنان یکی از اشکالات کدنویسی CSS یعنی در هم ریختگی کد ها به شدت رفع می شود.

در قسمت بعدی از آموزش Sass به بررسی شیوه ایمپورت کردن، درون ریزی یا فراخوانی یک فایل Sass در فایل دیگر می پردازیم.

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
برای ثبت سفارش برنامه نویسی، طراحی وب سایت، بهینه سازی و... در کاپ کد کلیک کنید.

دیدگاه خود را بیان کنید

@