css 变量操作_css变量拼接

js设置变量:
	dom节点.style.setProperty('--名称','内容');
	
js读取变量:
	方式一:dom节点.style.getPropertyValue('--名称');   
		该方式只能读取setProperty设置的变量,不能读取在css中的变量,但都能设置css变量
		
	方式二:getComputedStyle(dom节点).getPropertyValue('--名称');  
		能读取css中设置的变量和setProperty设置的变量,但不能.setProperty来设置变量
		
js删除变量:
	dom节点.removeProperty('--变量名');
	
css设置变量:
	可以在任何选择器内声明变量,变量具有自己的作用域
	
	:root{  通常在:root根元素里声明全局变量,保证任何一个选择器内都能读到,对应document.documentElement
	
		--变量名:值
	}

css读取变量:
	var(--变量名,默认值可选空格等都会被视作参数的内容)
	
	选择器{
		样式:var(--变量名) 
		  
		(0)变量能够继承，当变量值不合法时，会使用属性的默认值
		(1)定义的变量不能用作属性名
		(2)大小写敏感
		(3)变量拼接:
			如果变量是一个字符串可直接与其他字符串拼接
		    --bar: 'hello';
		    --foo: var(--bar)'world';
		
		(4)变量是数字不能直接与数值单位直接连用:
			解决方法:
			--gap: 20;
				margin-top: calc(var(--gap) * 1px);
		
		(5)变量是带单位的字符串,无效
			/* 无效 */
			.foo {
			  --foo: '20px';
			  font-size: var(--foo);
			}
			
			/* 有效 */
			.foo {
			  --foo: 20px;
			  font-size: var(--foo);
			}
		
		(6)同一个 CSS 变量,可以在多个选择器内声明。读取的时候,不同优先级内生效不同的变量

transition过渡写法:
	css方式:
		.property {
		    background-color: var(--houdini-colorA);
		    color: var(--houdini-colorB);
		    transition: 1s --houdini-colorA, 1s --houdini-colorB;
		}
		.property:hover {
	        --houdini-colorA: yellowgreen;
	        --houdini-colorB: deeppink;
	    }
	    
	js方式:见上面方法
	
animation过渡写法:
	css方式:
		div {
				background-color: var(--houdini-colorA);
			    color: var(--houdini-colorB);
			    animation: change 10s infinite linear;
			}
		

		@keyframes change {
		    20% {
		        --houdini-colorA: yellowgreen;
		        --houdini-colorB: deeppink;
		    }
			...
		}
		
	js方式:见上面方法


less和sass中变量格式和操作同css一致,才能使用js来操作(未验证)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90