uniapp中动态修改伪类元素的样式

前言写个组件需要改变伪类元素的样式

css中如何用变量

1. 声明css变量的时候，变量名前面要加两根连词线（–）。
2. 变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
3. var()函数用于读取变量。
4. var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
5. 第二个参数不处理内部的逗号或空格，都视作参数的一部分。

1声明变量

<view  class="left-border" :style="{ '--border-left': borderLeft,}">

prop中定义

	      // 伪元素左边框
			borderLeft: {
				type: String,
				// default: '6rpx solid #ec706b'
				default: ''
			},

2 scss中使用

	.left-border {
		&:before {
			content: '';
			width: 0;
			margin: 20rpx 24rpx 20rpx 0;
			border-left: var(--border-left);
		}
	}

3坑

一开始写成--borderLeft 不生效，改成--border-left就行了