亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在SASS中訪問HTML屬性值

在SASS中訪問HTML屬性值

慕田峪9158850 2019-12-06 10:35:49
是否可以在SASS中訪問HTML屬性值?我有一行代碼說<ul id="my_id" data-count="3">哪里3是一些jQuery東西的結果。我需要3計算一些CSS。如何將其另存為SASS變量?或者,是否可以計算某個父元素的子元素數量?說我有這段代碼:<ul id="my_id" data-count="3">    <li>First list item</li>    <li>Second list item</li>    <li>Third list item</li></ul>(您可能已經猜到了,data-countmatches的值與列表項的數量匹配。)SASS可以對列表項進行計數并將該數字保存為變量嗎?任何想法將不勝感激。
查看完整描述

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標簽時

有關實時示例,請參考我使用相同技巧進行的演示。希望對您有所幫助。


查看完整回答
反對 回復 2019-12-06
  • 2 回答
  • 0 關注
  • 1002 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號