12

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-countリスト アイテムの数と一致します。) SASS はリスト アイテムをカウントし、その数を変数として保存できますか?

どんなアイデアでも大歓迎です。

4

2 に答える 2

14

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

ただし、CSS は属性に基づいて選択できます。したがって、あなたが望むよりも長くなりますが、次のようなことができます

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

また、ごく最近のブラウザーのサブセットのみに制限したい場合†</sup>、CSS関数を使用して、CSS ベースの計算で属性を使用できると思います。しかし、それはかなりの最先端です。calc()attr()

† 正直に言うと、どのブラウザーのどのバージョンがこれを完全に実装しているかはわかりません。私は使ったことはありませんが、Firefox にはそれがあると確信しています。また、他のブラウザーについてもわかりません。いずれにせよ、それは確かに十分にサポートされていません。

于 2012-11-21T20:47:42.400 に答える
5

CSS で順序付けされていないリスト内のアイテムの数を取得しようとしているようです (兄弟の数に応じてサイズを変更するためでしょうか?)。

実際、data-attribute を Sass 変数として使用することはできません。ただし、parent 内のアイテムの数を指定して、条件付きスタイルを適用する純粋な 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 タグが 1 つしかない場合
  • 50.00%liタグが2つある場合
  • 33.33%liタグが3つある場合
  • 25.00%liタグが4つある場合
  • 20.00%liタグが5個の場合
  • 16.66%liタグが6個の場合
  • 14.28%liタグが7個の場合
  • 12.50%liタグが8個の場合
  • 11.11%liタグが9個の場合
  • 10.00%liタグが10個ある場合

実際の例については、同じトリックを使用して行ったこのデモを参照してください。お役に立てば幸いです。

于 2013-02-19T14:46:26.187 に答える