SASS関数を使用して任意のコンテナの子の数を決定できますか？このコンテナのためSASS関数を使用して任意のコンテナの子の数を決定できますか？
<div class="columns columns_3">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
、私は+columns_3 でミックスインを実装したいが、コンテナが子どものn番目の数を持っている場合、ミックスインは次のようになります。
例えば、私は3つの列を持っているコンテナが持っています+columns_n
要素が何個あるかを知り、適切なクラスを設定する必要があります。 チャイルド、HTML、CSSの数を検出するにはJavascriptが必要です。あなたはあなたの問題と何を達成するために必要を説明する場合、私が知ってること
SCSS
.element {
$width: 100%;
width: $width;
div {
height: 100px;
float: left;
border:1px solid #000;
box-sizing: border-box;
}
@for $i from 1 through 12 {
&--#{$i} div {
width: $width/$i;
}
}
}
var element = document.getElementsByClassName('element')[0];
var childs = element.childElementCount;
element.classList.add("element--"+childs);.element {
width: 100%;
}
.element div {
height: 100px;
float: left;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.element--4 div {
width: 25%;
}<div class="element">
<!-- childs -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>恐ろしい！ これは完全に機能し、完全なソリューションです。ありがとう!! –
私はあなたがこれを行うことができると思う：
@function number(val) { @return val };
@mixins +columns_#{number(10)} {
// Your code;
}私はあなたの説明を理解していません。
.columnsコンテナ内の子の数はどのように決定されますか？ –
JavaScriptではありません。要素の数を動的に決定する場合は、JavaScriptソリューションを使用してください。しかし、私の場合、3を設定し、そのミックスインを使用すると、HTMLに3人の子供がいる必要があります。 – KolaCaine
これを実現するには、JSとSASSを組み合わせる必要があるようです。.....ありがとう –
もしあなたが範囲を持っていれば、あなたは何をする必要があるかによって、forループを使う可能性があります。たとえば、
$gridWidth = 100%;
@for $numItems from 1 through 12 {
.columns_#{$numItems} {
.column {
width: $gridWidth/$numItems;
}
}
}
ないが、しかし、それは他の人が前にそこにあったと考えられますし、答えを持っているかもしれませんが、おそらく実際には問題ではありません。 –
範囲はありますか？または1-9999999ですか？ –
範囲がない場合はその方が良いので、どのような場合でも実装できます。 しかし、今のところ1-12の範囲で私の問題は解決するはずです:) –