Skip to content

Latest commit

 

History

History
140 lines (98 loc) · 3.8 KB

3.2.3. CSS 变量.md

File metadata and controls

140 lines (98 loc) · 3.8 KB
Raw

CSS变量

使用自定义属性来设置变量名，并使用特定的 var() 来访问。（比如 color: var(--main-color);）

  • 基本用法 Edit
声明一个局部变量：

element {
  --main-bg-color: brown;
} 
使用一个局部变量：

element {
  background-color: var(--main-bg-color);
}

------------------------------------------------------

声明一个 全局 CSS 变量：

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}
使用一个 全局 CSS 变量：

.demo{
   color: var(--global-color);
}

1、CSS颜色属性的设置和表示方法

[css] view plain copy
<style type="text/css">  
    #div{  
        color: red;/*关键字表示法*/  
        color: #f00;/*短-16进制表示法*/  
        color: #ff0000;/*长-16进制表示法*/  
        color: rgb(255, 0, 0);/*rgb基本表示法*/  
        color: rgb(100%, 0, 0);/*rgb百分比表示法*/  
        color: hsl(240, 0%, 50%);/*色彩三属性表示法表示法，下文具体解释hsl含义*/  
        color: color(#29B4F0 a(50%) contrast(%10) h(10));/*颜色函数表示法，请看下文具体解释*/  
    }  
</style>

2、CSS自定义变量
声明语法：--*，如--color-basis: red;

调用语法：var(--color-basis)，如color: var(--color-basis);

位置：可以放在根选择器中，也可以放在常规选择器中

引申：CSS3根选择器，:root选择器匹配文档根元素，在HTML中，根元素始终是html元素，语法如下：

:root{

--color-basis: red;//定义一个CSS变量

background: #f00;//设置html元素背景色

}

3、CSS颜色函数

    CSS Color Module Level 4的颜色配置函数有：color()、gray()、hsl()、hwb()等，这些函数浏览器暂时不支持，实际开发需要引入第三方插件（postcss/cssnext）来做预处理。

    color-mod()函数详解：

    color-mod() = color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());

    调用语法：

    #div{background-color:color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast() blend());}

第一个参数基准色值，必须设定；

第二个参数及后面的参数为可选参数，这些参数的详细含义如下：

    a-alpha，透明度，值为百分比；

    b-blackness，黑度，值为百分比；

    blend，混合度，值为百分比;

    contrast，对比度，值为百分比；    

    h-hue，色相-色彩的第一属性，色彩的相貌区别；0-360deg，0和360是红色，接近120的是绿色，240是蓝色；

    l-lightness，明度，亮度-色彩的第二属性，表明色彩的明暗性质； 0%是最暗，50%均值，100%最亮。

    s-saturation，纯度，饱和度-色彩的第三属性，表明色彩的鲜灰程度；0%是灰度，100%饱和度最高 ;

    shade，暗度，值为百分比；

    tint，色调，值为百分比；

    w-whiteness，白度，值为百分比；

4、综合实例

[css] view plain copy
<style type="text/css">  
    :root{  
        --color-basis: red;  
        --mytheme-p-color: var(--color-basis);  
    }  
    p{  
        color:color(var(--mytheme-p-color) a(50%) hue(+30deg));//p元素dom数组集合中，每个元素的hue递增30deg，等同于hue += 30  
    }  
</style>

5、扩展

CSS函数：

attr();返回选择元素的属性值

calc();计算CSS属性值

linear-gradient();创建一个线性渐变的图像  
radial-gradient();用径向渐变创建图像
repeating-linear-gradient();用重复的线性渐变创建图像
repeating-radial-gradient();类似 radial-gradient()，用重复的径向渐变创建图像。

6、当前文字颜色属性

如：border: 1px solid currentColor;//currentColor是CSS3的一个变量