css中定义变量.5.29

css中定义变量

创建变量 书写格式： --自定义名字 : 值

使用变量 书写格式： var(变量名) 定义变量可分多种情况：

1、定义全局变量

:root { --borderColor:#ccc; }

使用：width:var(--borderColor);

2、定义某元素下的变量

.look{ --borderColor:#ccc; }

3、定义媒体查询下的变量

@media screen and (min-width: 1025px) { :root {--borderColor: #ccc; 　　 } }

使用： .has-border-table > tr > td { border-right: 1px solid var(--borderColor); }

less中定义变量

定义： @bg-color : #d9d9d9;

使用： .has-border-table > tr > td { border-right: 1px solid var(@bg-color); }

sass中定义变量

定义： $bg-color :#d9d9d;

使用： .has-border-table > tr > td { border-right: 1px solid var($bg-color); }