قوانین و ویژگی‌های فروکش Sass

قوانین درونی Sass

Sass به شما اجازه می‌دهد تا انتخاب‌کننده‌های CSS را به روشی مشابه HTML درونی کنید.

لطفاً این مثال کد Sass برای ناوبری وب‌سایت را ببینید:

SCSS Syntax:

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 در انتخاب‌کننده‌ها.

در 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

بسیاری از ویژگی‌های CSS دارای پیشوند مشابه هستند، به عنوان مثال:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• text-overflow

با استفاده از Sass، می‌توانید آن‌ها را به عنوان ویژگی‌های فروکش نوشتارید:

SCSS Syntax:

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;