2 回答

TA貢獻1851條經驗 獲得超3個贊
似乎您正在嘗試獲取CSS中無序列表中的項目數量(也許根據同級對象的數量來更改其大???)。
實際上,您不能將數據屬性用作Sass變量。但是,給定父項中的項數,有一種純CSS方法可以應用條件樣式。另外,它很容易用Sass編寫。
假設您列表中的最大項目數為10,并且您要基于列表中li標簽的數量來計算li標簽的大小。
@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標簽的寬度為:
100.0% 當只有一個li標簽時
50.00% 當有2個li標簽時
33.33% 當有3個li標簽時
25.00% 當有4個li標簽時
20.00% 當有5個li標簽時
16.66% 當有6個li標簽時
14.28% 當有7個li標簽時
12.50% 當有8個li標簽時
11.11% 當有9個li標簽時
10.00% 當有10個li標簽時
有關實時示例,請參考我使用相同技巧進行的演示。希望對您有所幫助。
添加回答
舉報