自定义属性(有时可以称为css变量或者层叠variables)是由CSS作者定义的实体,这些实体在一个document内可以被重用。一般按照自定义属性的符号设置(比如,--main-color: black;)然后使用var()函数使用。(例如color: var(--main-color))
复杂的网站有大量的CSS,通常会有很多重复的值。例如,同一个颜色可能会被在几百个地方都用到,可以从全局搜索去一次性替换掉。自定义属性允许这个值存储在一个地方,然后再多个地方引用。另一个好处是语义标识符号。(semantic identifier)例如,--main-text-color比#00ff00更容易理解,尤其是这个值在其他的上下文中也存在时。
自定义属性遵循级联,会从父级继承它们的值。
定义一个自定义的属性需要用--开始,然后属性的值需要是一个有效的CSS值。
和任何其他的属性一样,在一个规则集中定义:
element {
--main-bg-color: brown;
}
请注意规则集中的选择器定义了自定义属性可以使用的scope。一个通常的最佳实践是定义在:root伪类上,从而可以在html document全局获得权限:
:root {
--main-bg-color: brown;
}
不过你也可以在局部scope中使用css变量。
注意:css变量的属性名大小写敏感,--my-color会被当作--My-color属性。
就像上面提到的,使用自定义属性的话,需要在var()函数中使用。
element {
background-color: var(--main-bg-color);
}
在不同的class中应用相同的颜色。
.one {
color: white;
background-color: brown;
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: brown;
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: brown;
margin: 10px;
width: 100px;
}
.five {
background-color: brown;
}
<div>
<div class="one">1:</div>
<div class="two">2: Text <span class="five">5 - more text</span></div>
<input class="three">
<textarea class="four">4: Lorem Ipsum</textarea>
</div>
注意css中的重复部分,背景色多次用到,可以声明一个css变量。不过一般还是在:root上使用:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
自定义属性会继承。这也就意味着如果给定的element没有属性值,会继承父元素的值:
.two {
--test: 10px;
}
.three {
--test: 2em;
}
<div class="one"> <!--invalid-->
<div class="two"><!--10px-->
<div class="three"></div><!--2em-->
<div class="four"></div><!--10px-->
</div>
</div>
不要试图把它当做一个和其他语言中的变量一样的东西,css自定义属性最终展现形式是computed值,所以不要妄想去子样式中查找到这个变量。自定义属性仅仅对匹配到的选择器和它的子元素有效,和普通css一样。
使用var()的时候,可以使用回调函数。
var()函数不仅仅可以用于默认的标签,对于自定义的标签和Shadow dom都适用。
注意:fallback可用于提升兼容性。
规则可以看下面的例子:
.two {
color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}
.three {
background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}
注意:
与每个属性相关的经典CSS有效性概念在定制属性方面不是很有用。当解析自定义属性的值时,浏览器不知道将在何处使用它们,因此必须考虑几乎所有值都是有效的。不幸的是,这些有效值可以通过var()函数表示法在可能没有意义的上下文中使用。属性和自定义变量可能导致无效的CSS语句,从而导致在计算时间有效的新概念。
比如这个例子:
<p>This paragraph is initial black.</p>
:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
这个例子中的p的color属性应用了var函数,但是16px是color的无效属性值。因此找父元素,但是没有父元素,所以这个color的值替换为default initial value,替换以后这个属性就恢复为默认属性了。
注意:虽然CSS属性/值对中的语法错误将导致该行被忽略。但是使用级联值、无效替换(使用无效的自定义属性值)不会被忽略,从而导致该值被继承。
// 从行内样式中中获取变量
element.style.getPropertyValue("--my-var");
// 从任何地方获取到变量
getComputedStyle(element).getPropertyValue("--my-var");
// 在行内样式中设置变量
element.style.setProperty("--my-var", jsVar + 4);
:root {
--my-var: 24, 144, 255;
}
.custom-bg-1 {
background-color: rgba(var(--my-var), 0.5);
}
.custom-bg-2 {
background-color: rgba(var(--my-var), 0.7);
}
基于iView的ColorPick组件,实现用户根据自己的喜好切换主题色。
heat.scss
:root {
--heat-cell-bgc: 24, 144, 255;
}
.custom-alpha-8-1 {
background-color: rgba(var(--heat-cell-bgc), 0.125) !important;
}
.custom-alpha-8-2 {
background-color: rgba(var(--heat-cell-bgc), 0.25) !important;
}
...
.custom-alpha-8-8 {
background-color: rgba(var(--heat-cell-bgc), 1) !important;
}
colorFilter.vue
<template>
<div>
<ColorPicker
v-model="cellBackgroundColor"
placement="bottom-start"
@on-change="colorChange"
format="rgb"
/>
</div>
</template>
<script>
const getRGB = (str) => {
const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
return match
? {
red: match[1],
green: match[2],
blue: match[3],
}
: {};
};
export default {
name: 'color-filter',
data() {
return {
cellBackgroundColor: 'rgb(24, 144, 255)',
};
},
methods: {
colorChange(color) {
// 抽离出rgb值
const { red, green, blue } = getRGB(color);
const rgb = `${red},${green},${blue}`;
// 找到root元素
const rootElement = document.documentElement;
// 更新背景色css变量
rootElement.style.setProperty('--heat-cell-bgc', rgb);
},
},
};
</script>
<style lang="scss" scoped>
</style>
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。
原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。
JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的
引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局
解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。
JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象
这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!