css - 別の値に基づいて値を設定するSCSS

Question

SCSSで何かが可能かどうかを調べようとしています。

私が何を求めているのかよくわからない場合は、遠慮なく詳細を尋ねてください。しかし、これが私が達成しようとしていることです。

擬似コード：

.class1 { width:100px; }
.class2 { margin-right:[.class1{width}] + 2 }

にコンパイルする

.class1 {width:100px; }
.class2 { margin-right:102px; }

score 1 · Accepted Answer

私はあなたが望むものを手に入れると信じています、変数が最もよく使われます:

$yourWidth: 100px;
.class1 { width: $yourWidth; }
.class2 { margin-right: ($yourWidth + 2); }

更新 (コメント情報に基づく)

$ColCount次のように、空のリストとして始まるグローバル変数を以下に追加できます。

$WidthList: ();

次に、内部で計算され@mixin columns($numCols)た後、次の関数を追加して、その列の値をに追加します。$colWidthwidth$WidthList

join($WidthList, $colWidth);

次に、すべての列が計算されたら、すべての値を含むリストが必要widthです。これにより、他の場所で必要に応じてそれらにアクセスできるようになります...

.class2 { margin-right: (nth($WidthList, 5) + 2); }

... に必要な.cl-col5値が得られるはずですmargin。

私はこれをテストしなかったことに注意してください。また、実際に SASS を使用したこともありません。私はこれを、ここやサイトの他の場所にあるドキュメントに厳密に基づいています.

1 に答える 1