我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时刻转行前端。
今天学习目标
依照昨日的规划，昨日这边根底写了一个淘宝店模板页面标签结构，今天本来应该是完成页面效果的，可是这边看到了CSS变量，感觉很厉害，就想学习] j 2 !一下，加油，小又又！！！！
浏览器兼容性
Chrome浏览器关于CSS 变量兼容性较为良 m U 3 # | i好~~~。
根底语法
CSS中原生的变量界说语法是：--*，变量运用语法是：var(--*u } T F @ & % 5)，其中*表明咱们的变量称号。
CSS 变量声明限制少
关于命名这个东西，各种语言都有些f 3 | }显现，例如CSSx ? Y 4 Z J T选择器不能是数字开头，JS中的] – x 8 0 t R变量是不能直接数值的，可是X g } `，在CSS变量中，这些限制统统没有，例如：
:root{
--1:#369;
}
body{w f B
background-color:var(--1);
}
注：可是，不能包含
$，[，^，(，%等字符，一般字符局限在只要是“数字[0-9]``”“字母[a-zA-Z]“”“下划线_”G ] 1 G和“短横线-”这些组合，可P 4 M W B I n ` ^是可所以中文，日文或者韩文，k Z D h } ( Q V例如：
body{
--深蓝:#369;
bac+ X kkground-color:var(--深蓝);
}
所以，咱们就能够直接运用中文称号作为变量，不需求一向运用在线翻译了~e 6 M . & # , B~~~
可用中文命名？好神奇~~~~
CSe U E 9 y 4 1S变量与CSS选择器
变量的界说，或者说声明跟CSS计数器的声明相似。
例如下面这个比如：
:root{--color:purple;}
div{--color:greenF P x;}
#alert{--color:red;}
*{color:var(--color);}
<p>F m h .;我的紫色承继于根元素</p>
<q U ) g;diN E # T ] T w N |v>我的绿色来自直接设置</div&g[ j & # ( ^ , Ct;
<divid='alert'>
ID选择器权重更高，因此阿拉是赤色！
<p>我也是赤色，占了承继的光</p>
</div>
变量也是跟着CSS选择器走的，假如Q / : ] 0 p !变量所在的选择器和运用变量的元素没有交集，是没有效果的。
例如#alert界说的变量，只要% f : m P y – e cid为alert的元素才干享有。
假如你想变量大局运用，则你能够设置在:root选择器上{ J t l 。
当存在多个相同称号的变量时分，变量的掩盖规则由
CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important规划初衷是干掉JS的style设置，但关于变量的界说则没有这样的需求。
CSS变量默许值
CSS变量运用的完整语法为：var( [, ]? )，用中文表明便是：var( <自界说特点名> [, <默许值 ]? )。
意思便是，假如咱? 6 W k * H们运用的变量没有界说（留意，仅限于没有界说），则运用后边的值作为元素的特点值。/ 0 . i举w I ; / & [ q个比如：
.box{
--1x n D 4:#369;
}
body{
background-color:var(--1,#cd0000);
}
则此刻的背景色是#cd0000
留意事项y m t
变; c S / k W量声明方位
无论是变h ? m 0 L量的界说和运用只能在声明块{}里边，例如，下面这样是无效的：
--深蓝:#369;
body{
background-color:var(--深O T D ; r ? $ #蓝)g l N 3 o;
}
CSS特点名与CSS变量
CSS特点名能够走变量吗？
相似下面这样：
body{
--bc:background-color;
var(--bc):#369;
}
答案是不能够，要是能够支撑的话，那j v Q $ G , 2CSS的紧缩可就要逆天了，估量所有的特点都会变成1~2个字符，CSS变量不支撑一起多个声明。
不合法的缺省P 9 X 4 I m特性
请看下面这个比如：
body{
--color:20px;
backgrd T ; P 0ound-colR E 2 p H e h Por:w E 6 J S , R 8 S#369V g z c ^ r [ 9;
background-colorh 0 V f # V v M:var(--color,#cd0000);
}
上述<body>的背景色会是transparent,关于CSS变量，只要语法是正确的，就算变量里边的值是个杂乱无章的东西，也是会作为正常的声明解析，假如发现变量值是不合法的。
例如上面背景色显然不能是20px，则运用背景色的缺省值，也便是默许值代替~~~~~~
于是，上面CSS等同于：
body{
--color:20px;
background-color:#369;
background-color:transparenX K qt;
}
千万不能想当然得以为等同于backgrouT j r g :nd-color:20px，这也是为什么上面要着重 CSS 默许值的运用仅限于变量未界说的状况，并不包括变量不合法。
空格跟随特性
请看下面这个比如：
body{
--sizev J t n n w ( V S:20;
font-size:var(--size)px;
}
实践上，此处font-size:e H Z F ) w Hvar(--size)px等同于font-size:20 px，留意，20后边有个空格，所以，这里的font-size运用的是<body>元素默许的巨细。
因此，就不要试图取消Q E S P y 0 , F ?就运用一个数值来贯穿全场，还是运用保险的做法& x h ; 7 Q s * P：
body{
--sC * 8 f + ` i O (izt F C U ^e:20px;
font-size:var(--size);
}
或者运用CSS3 calc()核算：
body{
--s+ v s t 2 e h }ize:20;
font-size:calc(var(--size0 _ Y | v F B)*1px);
}
此刻，<body>的font-size巨细才是r I l20px，
相互传递特性
便是说，咱们在CSS变量界说的时分能够直接引入其他变J P u _ & F G @ G量给自己运用，例如：
body{
--green:#4CAF50;
--backg4 0 B R LroundColorl { * W 3:Q k O l I vvar(--green);
}
或者更杂乱的运用CSS9 P n ~ x3 calc()核算，例如：
bo5 Z C !dd y s k t [ g p Ry{
--columns:4;
--margins:calc(24px/var(--columns));
}
关于杂. K R w @ H c乱布局，CSS变量的这种相互传递和直接引用特性能够简化咱们的代码和完成本钱，特别和动态布局在一起的时分，无论是CSSh 5 W S n U |的响应式后者是JS驱动的布局改动。
随着浏览器宽度减小，? 4 M F * _demo中的4V H 7 h c r / k栏或许就变成3栏，2栏甚至1栏，实践开发的时分，显然不仅仅是栏目数量改动，宽度小，往往意味着访问设备尺度有限，此刻咱们往往会缩小空白距离以及文字字号巨细，这样，有限屏幕才干显现更多内容。
也便是说，当咱们响应式改动的时分，改动的CSS特点值U } s &不是1个，而是3个或者更多，假如咱们有3个响应点，是不是就至少需求U @ 8 H 29个CSS声明？
可是，因为咱们有了CSS变量，一起，CSS变量能够传递，当咱们遭遇响应点的时分，咱们只需求改动一个CSS: Z 6 y 7 [ [特点值就能够了。
下面便是本
demo核心CSS代码（只需求改动--columns这一个变量即可）~~~~~
.box{
--columnsg Q k:4;
--margins:calc(24px/var(--columns));
--space:calc(4px*va| 9 ( ~r(--columns));
--fontSize:calc(20pE ] 4 F gx-4/var(--columns));
borC @ m ~ : X * 3 5der:2m ~ z c ,pxsolid#000;
display:inline-block;
margin:var(--margins);
padding:var(--space);
font-size:var(--fontSize);
}
@mediascrep z k z - wenand(max-widtO M L j F qh:1200px){
.box{
--columns:3;
}
}
@mediascreenand(max-wi{ 6 @ ydth:900px){
.box{
--columns:2;
}
}
@mediascreenand(max-wiU C f D ~ ! % H 2dth:600px){
.box{
--columns:1;
}
}
今天学习总结
CSS变量有承继性，变量合法的缺省特性，空格跟随特性，内部传递特性。
今天心情
今天主要来说便是根底学习了一下 CSS 变量，感觉很神奇~~~~，希望明日完成电商页面布局能够运用到~~~~
本文运用 mdna } ice 排版
