css 使用變數

css 可以使用一些 function , 例如 calc 可以計算，還有一個比較少用的 var 這個變數的 function 規則 : 1. 變數前面要加 **"<font color='#f00'>--</font>"** 2. var 內容別放空格 範例如下: ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> body { --color1:#e00; --aa:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.1em,#0000 0.1em,#0000 1em) 0em 0em; --bb:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em; --cc:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em; } .a07221_c1 { width:6.1em; height:1em; background: var(--aa),var(--bb),var(--cc); background-repeat:no-repeat; font-size:3em; } </style> <div class="a07221_c1"> </div> </div> var 也可以搭配 calc 做計算 , 這樣可以把很多參數設為變數, 如果要修改，不需要一個一個改了 ``` $mmcode(r2) ``` <div class="mmresult r2"> <style> .a07222_c0 { display:inline-block; background-color:#ee0; --c1:#f00; --c2:#0a0; --c3:#00f; --h1:3em; --h2:2em; --h3:1em; } .a07222_c1 { color:var(--c1,#0f0); height:var(--h1); } .a07222_c2 { color:var(--c2); height:calc( var(--h1) + var(--h2) ); } .a07222_c3 { color:var(--c3); height:calc( var(--h1) + var(--h2) + var(--h3) ); } </style> <div class="a07222_c0 a07222_c1"> aaaa </div> <div class="a07222_c0 a07222_c2"> aaaa </div> <div class="a07222_c0 a07222_c3"> aaaa </div> </div>

css 可以使用一些 function , 例如 calc 可以計算，還有一個比較少用的 var 這個變數的 function

規則 :

1. 變數前面要加 "--"
2. var 內容別放空格

範例如下:

<style>
body
{
  --color1:#e00;

  --aa:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.1em,#0000 0.1em,#0000 1em) 0em 0em;

  --bb:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em;

  --cc:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em;

}

.a07221_c1
{
  width:6.1em;
  height:1em;
  background: var(--aa),var(--bb),var(--cc); 
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

<div class="a07221_c1">
</div>

var 也可以搭配 calc 做計算 , 這樣可以把很多參數設為變數, 如果要修改，不需要一個一個改了

<style>
.a07222_c0
{
  display:inline-block;
  background-color:#ee0;

  --c1:#f00;
  --c2:#0a0;
  --c3:#00f;
  --h1:3em;
  --h2:2em;
  --h3:1em;

}
.a07222_c1
{
  color:var(--c1,#0f0);
  height:var(--h1);
}
.a07222_c2
{
  color:var(--c2);
  height:calc( var(--h1) + var(--h2) );
}
.a07222_c3
{
  color:var(--c3);
  height:calc( var(--h1) + var(--h2) + var(--h3) );
}
</style>

<div class="a07222_c0 a07222_c1">
aaaa
</div>
<div class="a07222_c0 a07222_c2">
aaaa
</div>
<div class="a07222_c0 a07222_c3">
aaaa
</div>

aaaa

aaaa

aaaa