似乎您正在嘗試獲取CSS中無(wú)序列表中的項(xiàng)目數(shù)量（也許根據(jù)同級(jí)對(duì)象的數(shù)量來(lái)更改其大?。浚?。
實(shí)際上，您不能將數(shù)據(jù)屬性用作Sass變量。但是，給定父項(xiàng)中的項(xiàng)數(shù)，有一種純CSS方法可以應(yīng)用條件樣式。另外，它很容易用Sass編寫。
假設(shè)您列表中的最大項(xiàng)目數(shù)為10，并且您要基于列表中l(wèi)i標(biāo)簽的數(shù)量來(lái)計(jì)算li標(biāo)簽的大小。
@for $i from 1 through 10 {
li:first-child:nth-last-child(#{$i}),
li:first-child:nth-last-child(#{$i}) ~ li {
width: (100%/$i);
}
}
這將輸出以下CSS：
li:first-child:nth-last-child(1),
li:first-child:nth-last-child(1) ~ li {
width: 100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.33333%;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
width: 16.66667%;
}
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ li {
width: 14.28571%;
}
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(8) ~ li {
width: 12.5%;
}
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
width: 11.11111%;
}
li:first-child:nth-last-child(10),
li:first-child:nth-last-child(10) ~ li {
width: 10%;
}
基本上，這使li標(biāo)簽的寬度為：
100.0% 當(dāng)只有一個(gè)li標(biāo)簽時(shí)
50.00% 當(dāng)有2個(gè)li標(biāo)簽時(shí)
33.33% 當(dāng)有3個(gè)li標(biāo)簽時(shí)
25.00% 當(dāng)有4個(gè)li標(biāo)簽時(shí)
20.00% 當(dāng)有5個(gè)li標(biāo)簽時(shí)
16.66% 當(dāng)有6個(gè)li標(biāo)簽時(shí)
14.28% 當(dāng)有7個(gè)li標(biāo)簽時(shí)
12.50% 當(dāng)有8個(gè)li標(biāo)簽時(shí)
11.11% 當(dāng)有9個(gè)li標(biāo)簽時(shí)
10.00% 當(dāng)有10個(gè)li標(biāo)簽時(shí)
有關(guān)實(shí)時(shí)示例，請(qǐng)參考我使用相同技巧進(jìn)行的演示。希望對(duì)您有所幫助。
