带有旧版浏览器的回退功能的CSS变量

Question

TL; DR：如何使用SCSS为旧版浏览器提供具有回退功能的CSS变量。我试图理解这个article。在我看来，你必须已经是高级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... */ 
} 

Answer 1

更新：Postcss Custom properties可以做回退，且比下面的代码比较容易的方式

第1步：申报SCSS变量

所以首先我们希望把一些变量在$map，我会去用颜色变量：

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

步骤2：自动化的CSS 4变种代

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

在根发生的是：在颜色的每个键和值地图，我们打印followng：

--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 VAR

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

我们重建我们所做的事情产生在@each循环的VAR

---

整个代码将是：

$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); 
} 

---

现在这是一个简单的在文章中做了什么。你应该检查一下代码是否更健壮。

Answer 2

我以为你是知道的，为什么它没有显示出回落的原因。但是，由于这是一个答案，我将解释原因

当前的mixin块只有一个背景属性，它使得sass编译器只生成一个属性。我不认为sass可以确定浏览器是否支持'var'。所以，我们必须明确指出我们是否需要回退。

既然你已经有了地图中所有你需要的是通过为关键“主要”

@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

注：我要只背景的假设下书面答复彩色工作，而不是像在该文章中提到的所有其他属性。对于您需要创建一个合适的数据结构

Answer 3

如果您使用的是Sass，则可以通过Sass mixin自动执行回退。在地图上添加你的CSS变量名和它们的值，然后你可以看一下在输出回退的风格和上述混入使用像这样的首选1

$vars: (
    primary: yellow, 
); 

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

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

一个mixin这些值：

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

，并输出下面的CSS：

:root { 
    --primary: yellow; 
} 

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

的Et瞧:)