具有旧版浏览器后备的CSS变量

作者：8877Lyt_953 | 来源：互联网 | 2023-02-02 15:21

如何解决《具有旧版浏览器后备的CSS变量》经验，为你挑选了2个好方法。

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... */
}

Ced.. 11

更新: Postcss自定义属性可以执行回退,并且比下面的代码更容易

第1步:声明scss变量

所以首先我们要把一些变量放在a中$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;
  }
}

root中发生的是:对于颜色映射中的每个键和值,我们打印以下内容:

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

这对应于css变量声明.我相信在#{}键周围的奇怪位置是在值周围没有空格.结果是:

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

请注意,prefix(--colors-)与其上方的scss颜色映射名称相同.为什么在最后一步会变得清晰.

第3步:大量的地图!

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

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

在这里,我们添加将$propscss属性映射到包含值的地图的地图.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);
}

我简化了文章中的代码,它仍然有效,至少在这个例子中,文章中的代码需要更多考虑.

无论如何,这是发生的事情.

首先,我们将mixin称为:

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

现在,这是对本文所做内容的简化.您应该检查它以使代码更健壮.

1> Ced..：

更新: Postcss自定义属性可以执行回退,并且比下面的代码更容易

第1步:声明scss变量

所以首先我们要把一些变量放在a中$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;
  }
}

root中发生的是:对于颜色映射中的每个键和值,我们打印以下内容:

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

这对应于css变量声明.我相信在#{}键周围的奇怪位置是在值周围没有空格.结果是:

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

请注意,prefix(--colors-)与其上方的scss颜色映射名称相同.为什么在最后一步会变得清晰.

第3步:大量的地图!

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

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

在这里,我们添加将$propscss属性映射到包含值的地图的地图.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);
}

我简化了文章中的代码,它仍然有效,至少在这个例子中,文章中的代码需要更多考虑.

无论如何,这是发生的事情.

首先,我们将mixin称为:

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

现在,这是对本文所做内容的简化.您应该检查它以使代码更健壮.

2> rdhainaut..：

如果您使用的是Sass，则可以通过Sass mixin自动执行后备。创建一个CSS变量名称及其值的映射，然后可以在mixin中查找这些值，以输出后备样式和首选样式

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

Etvoilà:)

顺便说一句，不错，某些postCSS插件会自动执行此操作（如果我没记错的话，这称为自定义属性）。我最终使用它，因为它更方便

仅供参考，您需要插值map-get，因此--- primary：＃{map-get（$ vars，primary）};`

推荐阅读

key
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
key
bzoj4554【TJOI2016&HEOI2016】游戏

4554:[Tjoi2016&Heoi2016]游戏 ... [详细]

蜡笔小新 2023-10-17 19:29:25
case
如何使用JavaScript动态设置CSS3属性值

这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]

蜡笔小新 2023-10-11 05:24:06
case
在DIV内垂直居中UL - Centering Vertically an UL inside a DIV

iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]

蜡笔小新 2023-09-16 19:05:52
case
在vuecli中运用scss/less全局变量

起首须要装置插件：sass-resources-loadernpmisass-resources-loader--save-devscss:修正vue-cli的buildutils ... [详细]

蜡笔小新 2023-09-14 15:07:29
import
sass学习笔记1-3

保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg ... [详细]

蜡笔小新 2023-09-14 09:39:44
import
与使用javascript变量相比，使用scss / css有什么优势？

在ReactWeb应用程序的上下文中，cssscsssass中有哪些功能是使用纯JavaScript ... [详细]

蜡笔小新 2023-09-12 09:15:41
import
cnpm 安装 node-sass & sass-loader, 仍旧无法编译的原因

原因：增加配置：webpack.base.conf.jsloaders:{scss:[vue-style-loader,css,sass].join(! ... [详细]

蜡笔小新 2023-09-09 15:27:27
import
大呼为什么单个文件类型不能在括号中工作

在我的gulpfile中，我注意到了这种奇怪的行为。如果我这样定义手表（带括号）： ... [详细]

蜡笔小新 2023-09-02 11:24:20
get
【BZOJ3197】[Sdoi2013]assassin 树同构+动态规划+KM

【BZOJ3197】[Sdoi2013]assassinDescriptionInputOutputSampleInput412233400111000SampleOutput ... [详细]

蜡笔小新 2023-08-30 19:41:02
数组
[置顶] ACM头文件、常用函数、宏定义

部分转载自：http:blog.csdn.netliujiuxiaoshitouarticledetails69920917头文件#include<assert.h& ... [详细]

蜡笔小新 2023-10-16 12:54:07
数组
CSS3是怎么实现全景特效？

很有意思的全景动画：（直接上代码）html部分：<div><div>css部分：.panorama{width:300px;hei ... [详细]

蜡笔小新 2023-09-16 12:37:52
数组
CSS3如何实现loading预加载动画特效

小编给大家分享一下CSS3如何实现loading预加载动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章 ... [详细]

蜡笔小新 2023-09-16 12:05:33
数组
html5+css3网站菜单的示例分析

这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习 ... [详细]

蜡笔小新 2023-09-16 11:05:47
import
用React加CSS3实现微信拆红包动画

微信红包曾经引爆过一系列的营销热潮，相信大家对于这种红包形式并不陌生，这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果，供大家一起交流学习项目源码地址：https:g ... [详细]

蜡笔小新 2023-09-15 14:59:28

8877Lyt_953

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章