変数を持つhtmlクラスを使ってhtml要素をスタイル設定する方法はありますか？

Question

私は、クラスの名前に基づいて特定のスタイルを持つことが可能かどうかを知りたいだけです。例えば

、ブートストラップ4は次のようにマージンとパディングのためのヘルパークラスがあります。これは、最上部に余白ののdiv 1EMを与え、すべての側面からのパディングを削除

<div class="m-t-1 p-a-0"></div>

。

私は彼らがこれを達成するために、このクラスをCSSでスタイリングしていると確信しています。 しかし、クラスを変数として使用する方法があるのか​​不思議です。例えば

：xは任意の数とすることができる

<div class="fs-x"></div>

は、このクラスは、次いでスタイリングDIVへfont-size: xを与えるだろう。

これは可能ですか？

ありがとうございました。

Answer 1

あなたがこれを達成するためにこのようなSASS以下のようにCSSプリプロセッサを使用することができるが、それは、以下に指定された範囲内の静的クラスを生成SASS documentationの例である：

このCSSを発する

$class-slug: for !default 

@for $i from 1 through 4 
    .#{$class-slug}-#{$i} 
    width: 60px + $i 

。

.for-1 { 
    width: 61px; 
} 

.for-2 { 
    width: 62px; 
} 

.for-3 { 
    width: 63px; 
} 

.for-4 { 
    width: 64px; 
} 

Answer 2

すべてのCSSクラスを明示的に定義する必要があります。だから、すべての変化は、Xは

Answer 3

あなたは一例

$x = 10px; 

img{ 
    margin-bottom : $x; 
} 

のCSSに定数を使用することができます.cssファイル内に存在する必要がある場合はしかし、あなたはこのよう

:root { 
    --color-principal: #06c; 
} 

#foo h1 { 
    color: var(--color-principal); 
} 

で変数を宣言することができます