想不想自定义一个CSS属性?

想不想自定义一个CSS属性?_第1张图片

最近翻大漠老师和张鑫旭大师的文章时,对CSS自定义属性非常感兴趣,所以就针对他们的文章自行学习理解了一番。CSS自定义属性?听着怎么那么奇怪呢,属性还可以自定义,那不是可以放肆地玩耍?

名字和用途

其实CSS自定义属性还有很多我们更为熟悉的曾用名或者说小名,比如CSS变量、原生变量、CSS自定义属性级联变量,没错,都是同个东西。

啊原来是变量啊,说得那么玄乎,但是你可别小看它,玩得溜的话简直帅炸。

说到变量,在SASS\LESS等CSS预编译工具中大家都已经经常运用,有那么几点好处:
1、能使用颜色变量统一风格;
2、可以采用一致的组件属性,包括布局和定位等;
3、避免代码冗余等等。

那既然SASS就能做到的东西,我们还有这个所谓的CSS变量干什么呢?人家自然有它的独到之处。

比如可以在运行时改写,具备动态性;
比如方便使用JS读取和改写;
比如可继承、可组合、同时具有作用域。

在这几个方面,预编译工具完全被CSS变量KO了。

CSS变量语法

语法很简单,分成两步,声明变量和使用变量。

声明变量:

:root{
  --*: xxxx;
  /* --variable-name: variable-value */
}

这里需要注意几个点:
1、变量必须声明在{}中,如果在这里把它理解为属性就更好记忆了,毕竟我们不会把CSS属性写到括号外边去。
2、*号代表的就是我们给变量起的名字。起名字这事真的很烦人,还好CSS变量的名称限制很少,除了一些特殊关键字符不用使用,正常来说你用数字\字母\下划线_\短横线-都是没问题的,据说还可以使用中文、日文和韩文。

:root{
  --黑色: #000;
}

body{
  background-color: var(--黑色);
}

手贱如我试了一下,真的可以。但是我怕写出去被别人打。

使用变量:
很简单,就是我们很熟悉的var。

:root{
  --*: xxxx;
}

.div{
  background: var(--*);
}

还有一种设置默认值的使用,就是在变量名称后面,加上一个默认值。

.div{
  background: var(--变量名称,[默认值]);
}

也就是说,当这个变量没有被声明过的话,就会使用默认值,不至于没着没落的。注意这里的情况是变量没有被声明过,要是变量是声明过的,但是使用起来是不合法的,那么就会采用原来属性的缺省默认值,并不是后面这个你设定的默认值。

p{
  background-color: var(--color, #000);
  /* --color没有声明过,所以这里的p背景是黑色的 */
}

p{
  --color: 20px;
  background-color: var(--color, #000);
  /* 很明显,background-color: 20px;是语法错误的,所以背景色为透明,是这个属性的默认值 */
}

作用域
1、如果你需要定义一个全局的变量,那么可以放在:root根元素下面;
2、如果只需要在部分元素\组件下使用,就定义在相关的类下面;
3、另外还可以在@media媒体查询中或者:hover等伪类中使用。

权重
理解了作用域,那么权重也是同样的道理,应该CSS变量是可以继承的,所以权重跟我们平时的属性权重理解是一样的。这里引用一下张鑫旭大神的例子。

想不想自定义一个CSS属性?_第2张图片
www.zhangxinxu.com

变量组合
这里举了三个例子,具体的说明在注释中。

p{
 --fz: 50;
 font-size: var(--fz)px;
 /* 不要太天真,这样是错的 */
}

p{
  --fz: 50;
 font-size: calc( var(--fz) * 1px);
 /* 如果你想这样用,可以使用calc()函数 */
}

p:after{
 --text: "hello";
 content: var(--text) " world";
 /* 但是字符串的连接是可以实现的 */
}

当然,变量不止可以直接使用,直接或者通过计算把值传递给另一个变量也是可行的。

p{
  --fz: 20px;
  --fz-lg: var(--fz);
  font-size: var(--fz-lg);
  /* 直接传递 */
}

p{
  --fz: 20px;
  --fz-lg: calc( var(--fz) * 1.5);
  font-size: var(--fz-lg);
  /* 通过计算后传递 */
}

在JS中使用CSS变量
读:getPropertyValue( )
写:setProperty( )

比如说,你在:root上定义了一个color变量,用于设置页面的主题色,那么通过下面的JS,你就可以很简单地改变color变量的值,从而改变页面的主题色。换个皮肤,so easy。

// 读取数据
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--color').trim();

// 改写数据
document.setProperty('--color', value);

最后就是充分发挥你的想象力,看看CSS变量与JS的结合能产生什么样奇妙的效果~最后就附一个大漠老师的想象力成果吧。

想不想自定义一个CSS属性?_第3张图片

你可能感兴趣的:(想不想自定义一个CSS属性?)