css less scss变量使用

1、css变量

定义：使用双减号(--)来声明变量。变量只能用来声明属性值，不能用来声明属性名。

:root ：css 伪类，匹配文档的根元素 ， 可以用于声明全局 css 变量

:root {
  --bg-color: lightgray;
  
  --margin-top:20;  
  
  --font-size: 20px;
}

使用：用var来读取变量，如果变量值是数值，不能与数值单位直接连用,需要配合calc()使用

background-color: var(--bg-color);

margin-top:var(--margin-top)px;//无效
margin-top:calc(var(--margin-top)*1px);

font-size: var(--font-size);

2、less变量

定义：@ 开头 定义变量。

使用：直接使用@名称来读取变量值

1、选择器变量

变量名 必须使用大括号包裹

@mySelector: #wrap;
@Wrap: wrap;


@{mySelector}{ 
    color: #999;
    width: 50%;
}
.@{Wrap}{
    color:#ccc;
}
#@{Wrap}{
    color:#666;
}

2、属性变量

@borderStyle: border-style;
@Soild:solid;


#wrap{
  @{borderStyle}: @Soild;
}

3、url 变量

变量名必须使用大括号包裹，变量值需要添加引号

@images: "../img";

body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

4、声明变量

变量名必须使用大括号包裹，变量值需要添加引号

@background: {
  width: 200px;
  height: 200px;
  border: solid 1px red;
};

#main{
  @background();
}

4、变量运算

变量名必须使用大括号包裹，变量值需要添加引号

@width:300px;
@color:#222;

#main{
    width:@width-20;//280px
    height:@width-20*5;//200px
    margin:(@width-20)*5;//1400px
    color:@color*2;//#444
    background-color:@color + #111;//#333
}

3、scss变量

定义：$ 开头 定义变量。

使用：直接使用$名称来读取变量值

$width: 5em;

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;//width: 5em;
}