我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时刻转行前端。
今天学习目标
依照昨日的规划,昨日这边根底写了一个淘宝店模板页面标签结构,今天本来应该是完成页面效果的,可是这边看到了CSS变量,感觉很厉害,就想学习] j 2 !一下,加油,小又又!!!!
![转行学前端的第 18 天 : 学习 CSS变量 转行学前端的第 18 天 : 学习 CSS变量](https://www.6hu.cc/storage/2020/04/1587906017-5bcbde36f02c7e1.png)
浏览器兼容性
![转行学前端的第 18 天 : 学习 CSS变量 转行学前端的第 18 天 : 学习 CSS变量](https://www.6hu.cc/storage/2020/04/1587906017-77c9ec92d30d8df.png)
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;
}
}
![转行学前端的第 18 天 : 学习 CSS变量 转行学前端的第 18 天 : 学习 CSS变量](https://www.6hu.cc/storage/2020/04/1587906017-19eed11b6cb9759.png)
今天学习总结
CSS变量
有承继性
,变量合法的缺省特性
,空格跟随特性
,内部传递特性
。
![转行学前端的第 18 天 : 学习 CSS变量 转行学前端的第 18 天 : 学习 CSS变量](https://www.6hu.cc/storage/2020/04/1587906017-462c95b81d11654.png)
今天心情
今天主要来说便是根底学习了一下 CSS 变量
,感觉很神奇~~~~,希望明日完成电商页面布局能够运用到~~~~
![转行学前端的第 18 天 : 学习 CSS变量 转行学前端的第 18 天 : 学习 CSS变量](https://www.6hu.cc/storage/2020/04/1587562664-4bd245da1cab017.gif)
本文运用 mdna } ice 排版