HTMLからSCSSへの値の受け渡し

Question

私はSCSSを初めて使用していて、使い方がわかりません。私はSOや他の場所で解決策を見いだしたができなかった。

携帯電話のリストを表示するアプリを開発しています。 REST APIを呼び出してこのリスト（JSON形式）を取得します。すべての電話機には、名前、モデル、価格、使用可能、数量など、表示される同じタイプの情報があります。

私の質問はAccess HTML attribute value in SASSと似ていませんのでご注意ください。このリンクでは、親要素の子の数を計算する方法について説明します。私の場合、JSONオブジェクトのプロパティの値に応じて、スタイルシートコード（color、font-size、font-width）を取得したいと考えています。私がやろうとしています何

は次のとおりです。

• 表示電話の種類に応じて、個々の色と、自分のDIV /カードでこれらの携帯電話。 「Phone Type」は整数値です。
• さまざまなフォントサイズで表示名、価格、利用可能数量。

私はSCSSで @mixinについてを読んでいると、彼らはパラメータを受け入れることができます。私はこれを私の電話のタイプ整数/数値の値を渡すために使うことができると思います。

私が見たすべての例では、パラメータ値を渡すことによって別のSCSSファイルから@mixinを呼び出しています。

これはパラメータ値を@mixinに渡す唯一の方法ですか？

@mixin HTMLにSCSSからパラメータ値を渡す方法（電話タイプ私の場合は）がある場合、誰かが私に教えてくださいことができればそれは素晴らしいことです。

ご協力いただきまして誠にありがとうございます。

ありがとうございます。

Answer 1

これは私が何を推測しているのですかあなたはと尋ねていますか？

は、私は私のJSONオブジェクトのプロパティの1つの値に に依存スタイルシートコード（色、フォントサイズ、フォント幅）を取得したいです。

これは、SCSSファイルが処理され、静的なCSSファイルに変換されてページにロードされるという理由から可能ではありません。そのことを念頭に置いて、あなたが代わりにできるのはこれです。

携帯電話の種類の値によってHTMLが変わることがあると仮定すると、これをHTMLに反映させることができます。

HTML

<div class="phone-type-1"> 
    12345 
</div> 

<div class="phone-type-2"> 
    12345 
</div> 

<div class="phone-type-3"> 
    12345 
</div> 

CSS

.phone-type-1 { 
    color: red; 
} 

.phone-type-2 { 
    color: green; 
} 

.phone-type-3 { 
    color: blue; 
} 

あなたはこのCSSのためのミックスインを使用することができますが、あなたがする必要はありません。あなたがそれを必要としているのと同じように上記は十分です。ここではlearn more about Mixinsを使うことができますが、どのように動作するのか説明しています。

CSS3の中には、特にCSS3 と存在する多くのベンダープレフィックスがあり、少し面倒です。 mixinを使用すると、サイト全体で再利用したいCSS宣言のグループ を作成できます。 は値を渡してmixinをより柔軟にすることもできます。 mixinの良い使用 は、ベンダープレフィックスのためのものです。 border-radiusの例は です。

追加の軽食として、ミックスインはそのように機能します。

@mixin text($colour, $size) { 
    color: $colour; 
    font-size: $size; 
} 

.class { 
    @include text(yellow, 14px); 
} 

もちろん、CSSファイルにコンパイルすると、これだけです。

.class { 
    color: yellow; 
    font-size: 14px; 
}