Sass Nested Rules and Properties
قوانین تو در تو
Sass این امکان را فراهم می‌کند که انتخاب کننده‌های CSS را به همان صورت HTML به صورت تو در تو استفاده کنیم.
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 است.
خصوصیت‌های تو در تو
خیلی از خصوصیت‌های CSS دارای پیشوند مشابهی هستند مانند؛ font-family ،font-size و font-weight. با استفاده از Sass می‌توانید آن‌ها را به شکل تو در تو بنویسید.
p {
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
}
خروجی CSS:
p {
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
}