Ichma-ich(Nesting)
...
Sass Ichma-ich Qoidalar va Xususiyatlar
Sass sizga CSS selektorlarini xuddi HTML kabi ichma-ich yozishga imkon beradi.
Saytning navigatsiyasi uchun bir oz Sass kodini ko'rib chiqing:
Misol
SCSS Sintaksisi:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
E'tibor bering, Sassda ul
, li
va a
selektorlari nav
selektori ichiga joylashtirilgan.
CSSda esa qoidalar bitta-bitta (ichma-ich bo'lmagan holatda) yoziladi:
CSS Sintaksisi:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sassda xususiyatlarni ichma-ich yozish mumkin bo'lgani sababli, bu usul standart CSSga qaraganda tozaroq va o'qish uchun qulayroq.
Sass Ichma-ich Xususiyatlar
Ko'pgina CSS xususiyatlari bir xil prefiksga ega, masalan, font-family
, font-size
, va font-weight
, yoki text-align
, text-transform
va text-overflow
.
Sass yordamida ularni ichma-ich xususiyatlar sifatida yozishingiz mumkin:
Misol
SCSS Sintaksisi:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
Sass transpilyatori yuqoridagi kodni odatiy CSSga aylantiradi:
CSS Natijasi:
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
Last updated on 12/4/2024