• 关于命名东西，各种语言都有些显示，例如css选择器不能是数字开头，JS中的变量是不能直接数值，但是在CSS变量中，这些限制通通没有
  • 不能包含$,[,^(%等字符，普通局限在只要是 数字[0-9]字母[a-zA-Z]下划线_和短横线-这些组合，但是可以是中，日文或者韩文
  • 变量值只能用作属性值，不能用作属性名；下面代码中，变量—side用作属性名，这是无效的

全局/局部变量

:root伪类可以看做是—个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

  1. :root {--color: blue;}
  2. .box {color: var(--color)}
  3. .box {color: var(--color,red)}

CSS变量的默认参数

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一 部分;

  1. color: var(--foo, #7F583F);
  2. var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px;15px 20px);

CSS 变量的拼接

如果变量值是一个字符串，可以与其他字符串拼接;
如果变量值是数值，不能与数值单位直接连用;
如果变量值带有单位，就不能写成字符串; 

  1. //字符串
  2. --bar: 'hello'; 
  3. --foo: var(--har)' world';
  5. //变量值是数值
  6. foo { -gap: 20; margin-top: var(--gap)px; /* 无效*/ }
  8. // 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接，
  10. foo { -gap: 20; margin-top: calc(ar(--gap) * 1px); }
  12. // 变量值带有单位
  13. .foo {--foo: '20px'; font-size: var(--foo); /* 无效*/}
  14. .foo {--foo: 20px; font-size: var(--foo); /* 有效*/}

CSS变量的作用域

同一个CSS变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与CSS的”层叠” (cascade)规则是-致的;

  1. <style>
  2.   .root { --color: blue; }
  3.   div {--color: green; }
  4.   #alert {--color: red; }
  5.   *{ color: var(--colör); }
  6. </style>
  8. <p>蓝色</p>
  9. <div>绿色</div>
  10. <div id="alert">红色</div>

css变量的注意问题

  • 当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无

!important这种用法

  • 变量的取值采用就近原则。
  • 如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接;
  • 如果变量值带有单位，就不能写成字符串。
  • CSS属性名是不可以使用变量的;
  • CSS变量是存在缺省值， 只要定义正确，里面的值不对，结果以缺省值显示;
  • CSS变量默认尾部是有空格的;

CSS变量的响应式布局

  • CSS是动态的，页面的任何变化，都会导致采用的规则变化。
  • 利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。
    1. body {--primary: #7F583F;- secondary: #F7EFD2;}
    2. a {color: var(--primary);text-decoration-color: var(--secondary);}
    3. @media screen and (min-width: 768px) {
    4. body {--primary: #F7EFD2;--secondary: #7F583F;}
    5. }