SASSのHTML属性値にアクセス

Question

SASSのHTML属性値にアクセスできますか？ 私は3は、いくつかのjQueryのものの結果である

<ul id="my_id" data-count="3"> 

を言うのコードの行を持っています。 CSSを計算するには3が必要です。どうすれば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-countの値は、リスト項目の数と一致する。）SASSは、リスト項目をカウントし、変数としてその数を保存することができます：私はこのコードを持っていると言いますか？

アイデアをいただければ幸いです。

Answer 1

Sassは単なるCSSジェネレータです。 HTMLと実際にはやり取りしないので、Sass変数としてHTML属性を使用することはできません。

ただし、CSSは属性に基づいて選択できます。だから、より長いったらしいあなたが好きかもしれないよりになりますが、あなたは

ul[data-count="3"]:after 
    content: "There were three items in that list!" 

ような何かを行うことができますし、唯一†ごく最近のブラウザ^{のサブセットに自分自身を制限するために喜んでいる場合、私はを考えるCSS calc()関数をattr()とともに使用して、CSSベースの計算で属性を使用することができます。しかし、それはかなり出血しています。}

^{†正直言って、どのブラウザのどのバージョンがこれを完全に実装しているかはわかりません。私はそれを使用していないが、Firefoxがそれを持っていることは確かだが、私は他のブラウザについて全く知らない。いずれにせよ、それは確かに十分にサポートされていません。}

Answer 2

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タグ

50.00%がある場合に

• 100.0%：

  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が幅をタグ与えます2つのliタグがある場合

• 33.33% 3個のLiタグ
• 25.00%
5個のLiタグ
• 16.66%
があるとき4個のLiタグ
• 20.00%
7個のLiタグがある場合6個のLiタグ
• 14.28%
がある場合がある場合がある場合
• 9つのリータグ10のLi tはある
10.00%
• がある場合8個のLiタグ
• 11.11%がある12.50% ag

ライブの例については、this demoを参照してください。同じトリックを使用しました。私はそれが助けて欲しい