css 样式 使用变量

最近发现在修改样式的时候，好多复用的按钮，各式各样的框之类的样式，一样的效果但是是复制了一边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中引入