web-dev-qa-db-ja.com

古いブラウザ用のフォールバック付きのCSS変数

TL; DR：SCSSを使用して、古いブラウザーのフォールバックを備えたCSS変数を作成するにはどうすればよいですか。

私はこれを理解しようとしています 記事 。私の意見では、あなたはそれを理解するために、すでに高度なSASSユーザーである必要がありますが、私はそうではありません。さらに悪いことに、この件に関して私が見つけた唯一の記事です。

これが私が達成しようとしていることです：

私のscssは次の行に沿っている必要があります：

body {
  @include v(background-color, primary)
}

次に、処理された[〜＃〜] css [〜＃〜]は

body{
   background: yellow; /* Yellow being defined above as the primary color */
   background: var(--color-primary);
}

少し遊んで、次のようにCSS変数の値を取得できます。

$colors: (
  primary: yellow,
);

:root {
  @each $name, $color in $colors {
    --color-#{$name}: $color;
  }
}

@mixin background-color($color_) {
  background: var(--color-#{$color_});
}

それを使用するには：

body{
  @include background-color(primary);
}

これはこの結果になります：

body {
    background: var(--color-primary);
    /* But the fallback is missing :(, I tried  things with the map-get but it's really eluding me... */
}
csssasscss-variables
11
Ced

Sassを使用している場合は、Sassミックスインを使用してフォールバックを自動化できます。 CSS変数名とその値のマップを作成し、フォールバックスタイルと優先スタイルを出力するミックスインでそれらの値を検索できます

$vars: (
  primary: yellow,
);

:root {
  --primary: map-get($vars, primary);
}

@mixin var($property, $varName) {
  #{$property}: map-get($vars, $varName);
  #{$property}: var(--#{$varName});
}

上記のミックスインは次のように使用されます：

body {
  @include var(background-color, primary);
}

次のCSSを出力します。

:root {
  --primary: yellow;
}

body {
  background-color: yellow;
  background-color: var(--primary);
}

その他:)

14
rdhainaut

更新：Postcssカスタムプロパティ フォールバックを実行でき、以下のコードよりもはるかに簡単です

ステップ1：scss変数を宣言する

したがって、最初にいくつかの変数を$mapに入れたいので、カラー変数を使用します。

$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

ステップ2：css 4 var生成を自動化する

// ripped CSS4 vars out of color map
:root {
  // each item in color map
  @each $key, $value in $colors {
    --colors-#{$key}: $value;
  }
}

ルートで発生することは、色mapの各キーと値について、次のように出力します。

--colors-#{$key}: $value;

これはcss変数宣言に対応します。キーの周りの#{}の奇妙な点は、値の周りにスペースを入れないことです。したがって、結果は次のとおりです。

--colors-primary: #FFBB00,
--colors-secondary: #0969A2

接頭辞（--colors-）は、その上のscssカラーマップと同じ名前であることに注意してください。理由は最後のステップで明らかになります。

ステップ3：たくさんの地図！

$props: (
  background-color: $colors
);

$map-maps: (
  background-color: colors
);

ここで、CSSプロパティを値を含むマップにマップするマップ$propsを追加します。 background-colorは色を保持するため、正しいマップは$colorsです。

map-mapsは、マップの代わりにマップの名前が付けられた小道具のコピーです。 （これは、ステップ2のメモに関連しています）。

ステップ4：機能させましょう！

@mixin v($prop, $var) {
  // get the map from map name
  $map: map-get($props, $prop);
  // fallback value, grab the variable's value from the map
  $var-fall: map-get($map, $var);
  // our css4 variable output
  $var-output: var(--#{$map}-#{$var});    
  #{$prop}: $var-fall;
  // css4 variable output
  #{$prop}: $var-output;
}

body{
  @include v(background-color, primary);
}

記事のコードをかなり簡略化しましたが、それでも機能します。少なくともこの例では、記事のコードはより多くのことを考慮しています。

とにかく、ここに何が起こるかです。

まず、ミックスインを次のように呼び出します：

  @include v(background-color, primary);

次に入ると、

 $map: map-get($props, $prop); // map-get($props, background-color)

$mapという変数があり、$propsマップ内のキーbackground-colorにある$colorsマップ内の値を割り当てます。少し迷路ですが、一度解けばそれほど複雑ではありません。

その後、フォールバックのために：

 $var-fall: map-get($map, $var);

これは単に$colorsキー（たまたまプライマリ）で取得したマップ（$var）の値を取得するだけです。したがって、結果は#FFBB00です。

CSS変数の場合

  $map-name: map-get($map-maps, $prop);
  $var-output: var(--#{$map-name}-#{$var});

@eachループで変数を生成するために行った処理を再作成します

コード全体は次のようになります：

$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

// ripped CSS4 vars out of color map
:root {
  // each item in color map
  @each $name, $color in $colors {
    --colors-#{$name}: $color;
  }
}



$props: (
  background-color: $colors,
  color:            $colors
);

$map-maps: (
  background-color: colors
);



@mixin v($prop, $var) {
  // get the map from map name
  $map: map-get($props, $prop);
  // fallback value, grab the variable's value from the map
  $var-fall: map-get($map, $var);
  // our css4 variable output

  $map-name: map-get($map-maps, $prop);
  $var-output: var(--#{$map-name}-#{$var});

  #{$prop}: $var-fall;
  // css4 variable output
  #{$prop}: $var-output;
}

body{
  @include v(background-color, primary);
}

これは、記事で行われる処理を単純化したものです。コードをもう少し堅牢にするために、チェックアウトする必要があります。

11
Ced

フォールバックが表示されなかった理由を知っていると思います。でも答えなので理由を説明します

現在のmixinブロックには、sassコンパイラーに1つのプロパティのみを生成させるバックグラウンドプロパティが1つだけあります。 sassがブラウザで「var」がサポートされているかどうかを識別できないと思います。したがって、フォールバックが必要かどうかを明示的に指定する必要があります。

あなたはすでにマップを持っているので、必要なのはキー「primary」を与えて値を取得することだけです

 @mixin background-color($color_) {
      background: var(--color-#{$color_});  
      background: map-get($colors, primary);
    }

これにより、背景が常に追加されます：ボディクラスに常に黄色。または、条件に基づいてフォールバックの追加を制御する場合。あなたはこのようにすることができます

@mixin background-color($color_, $showFall) {
  background: var(--color-#{$color_});  
  @if $showFall {
    background: map-get($colors, primary);
  }
}

そして、このように呼び出します

body{
  @include background-color(primary, true);
}

同じものにコードペン https://codepen.io/srajagop/pen/xdovON

注：背景色のみを機能させ、その投稿に記載されている他のすべてのプロパティは機能させないことを前提に、回答を書いています。そのためには、適切なデータ構造を作成する必要があります

1
karthick