当前位置: 首页 > 面试题库 >

创建CSS全局变量:样式表主题管理

傅丁雷
2023-03-14
问题内容

有没有办法在CSS中设置全局变量,例如:

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}

问题答案:

最新更新:16/01/2020

CSS自定义属性(变量)已经到来!到了2020年,是时候正式在您的新产品中推出此功能了
应用程序。

需要预处理器“ NOT”!

CSS中有很多重复。可以在多个地方使用一种颜色。

对于某些CSS声明,可以在级联中声明更高的位置,并让CSS继承自然解决此问题。

对于非平凡的项目,这并不总是可能的。通过在:root伪元素上声明一个变量,CSS作者可以使用该变量终止某些重复实例。

怎么运行的将变量设置在样式表的顶部:

CSS

创建一个根类:

:root {
}

Create variables (– [String] : [value] )

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

在CSS文档中的任何位置设置变量:

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

BROWSER SUPPORT / COMPATIBILITY

Firefox: Version 31 + (Enabled by default)

Supported since 2014 (Leading the way as usual.)

[More info from Mozilla](https://developer.mozilla.org/en- US/docs/Web/CSS/Using_CSS_variables)

*Chrome:版本49 + (默认启用)。

自2016年以来受支持

Safari / IOS Safari: 9.1 / 9.3版(默认启用)。

自2016年以来受支持

Opera:版本39 + (默认情况下启用)。

自2016年以来受支持

Android:版本52 + (默认情况下启用)。

自2016年以来受支持

边缘:版本15 + (默认情况下启用)。

自2017年以来受支持

CSS自定义属性进入Windows Insider Preview内部版本14986

IE:当猪飞。

现在是时候让这艘船沉没了。无论如何,没人喜欢骑她。☺

W3C SPEC

即将到来的CSS变量的完整规范

Read more

试试看
下面附有小提琴和摘录以进行测试:

(仅适用于受支持的浏览器。)

:root {

  --red: #b00;

  --blue: #4679bd;

  --grey: #ddd;

  --W200: 200px;

  --Lft: left;

}

.Bx1,

.Bx2,

.Bx3,

.Bx4 {

  float: var(--Lft);

  width: var(--W200);

  height: var(--W200);

  margin: 10px;

  padding: 10px;

  border: 1px solid var(--red);

}

.Bx1 {

  color: var(--red);

  background: var(--grey);

}

.Bx2 {

  color: var(--grey);

  background: black;

}

.Bx3 {

  color: var(--grey);

  background: var(--blue);

}

.Bx4 {

  color: var(--grey);

  background: var(--red);

}


<p>If you see four square boxes then variables are working as expected.</p>



<div class="Bx1">I should be red text on grey background.</div>

<div class="Bx2">I should be grey text on black background.</div>

<div class="Bx3">I should be grey text on blue background.</div>

<div class="Bx4">I should be grey text on red background.</div>


 类似资料:
  • 我得到一个编译错误的代码: 我想让“match”成为一个全局变量。 我的编译错误是: “内部类TestingProgramm中的静态声明非法。匹配修饰符”static“只允许在常量变量声明中使用 在初始化期间使用静态非final变量。“ 我不知道这个错误是什么意思,也不知道如何修复它。

  • 问题内容: 我有一个全局变量,需要在我的ViewController之间共享。 在Objective-C中,我可以定义静态变量,但是找不到在Swift中定义全局变量的方法。 您知道这样做的方法吗? 问题答案: 来自官方的Swift编程指南: 全局变量是在任何函数,方法,闭包或类型上下文之外定义的变量。全局常数和变量总是延迟计算的。 您可以在任何文件中定义它,也可以在任何位置访问它。因此,您可以在任

  • 在JavaScript中,我可以这样做: 然后在另一个文件中: 它将定义

  • 问题内容: 我想将一个脚本加载到redis中,该脚本将导出将来执行的脚本将依赖的函数,但是尝试定义全局函数失败,对于全局变量也是如此: 如何定义全局函数和变量? 问题答案: 查看文件scripting.c中的源代码 的doc字符串表示意图是将常见错误通知脚本作者(不使用)。 看来这不是安全功能,所以我们有两个解决方案: 可以删除此保护: 或使用:

  • 问题内容: 在我的android应用程序中,我需要放置可变成员id的位置。问题是,它是从在线API获取的,我需要找到一种存储/检索它的方法 我尝试将其放在自定义类中,但是问题是,如果我取消活动,它将丢失,我还知道有一种方法可以扩展应用程序。 所以我想知道存储全局变量的最佳方法是什么? 我必须实现: 将变量保存在onSaveState上 将其保存在sharepref 手动保存 手动检索 谢谢 更新:

  • 问题内容: 我试图设置一个全局变量。就我而言,只是一个布尔标志,用于指示是否首次显示视图: 呈现视图后,我想将此标志设置为false: 然后检查它: 因此,我想创建一个全局变量。在哪里以及如何?我试过了: 在我的视图控制器领域 在我的AppDelegate.swift文件中的方法中 在班上 没运气。我收到一条错误消息 (注意:我意识到,在这个问题中,我背叛了我对Swift中如何处理范围的无知。请原