最近发现在修改样式的时候,好多复用的按钮,各式各样的框之类的样式,一样的效果但是是复制了一边css代码实现的。重构使用 css 变量
css
首先CSS 变量也有全局和局部作用域。和js一致,花括号中 {} 是一个作用域
如需创建具有全局作用域的变量,请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
如需创建具有局部作用域的变量,请在将要使用它的选择器中声明它。
下面的例子与上面的例子相同,但是在这里我们使用 var() 函数。var() 函数用于插入 CSS 变量的值
:root {
--color: #1e90ff;
}
div { background-color: var(--color); }
less
Less是css的扩展,Less不仅与CSS向后兼容,而且它添加的其他功能都使用现有的CSS语法。
直接看使用
@color: #f93d66;
div { background-color: @color; }
@fz:font-size;
h1{
@{fz}:18px;
}
scss
Sass 变量使用 $ 符号;
Sass 变量可以存储以下信息:字符串、数字、颜色值、布尔值、列表、null 值;
$Color: red;
$FontSize: 20px;
$side : left;
.div{
color: $Color;
font-size: $FontSize;
// 如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中
border-#{$side}: 1px solid pink;
}
和上面两个一样有作用域,但是Scss 中我们可以使用 !global 关键词来设置变量是全局的。
.one{
$Color: green !global;
color: $sysColor;
}
.two{
color: $Color;
}
支持数字的加减乘除、取整等运算 (+, -, *, /, %)
.contanier1{
margin: (14px / 2);
width: $sysWidth * 2;
height: 100px + 50px;
}
在这里建议大家都使用 ()将计算括起来
重要的不是方法而是使用,在实际应用中,一般我们会将多个页面公用的样式放到一个单独的文件中。声明变量也可以单独放到一个文件内,这样利于我们维护代码。类似于若依的写法
若依的这个样式,大家应该都用过,就是这样实现的,在main中引入