Sass运行环境搭建—基本语法（二）
更新时间：2018-12-20 | 阅读量(1,020)
## 1.变量
- **声明变量**
```scss
$bgColor:green;
$fontSize:20px;
$border:1px solid blue;
//上面声明了3个变量
div{
background: $bgColor; //使用变量
height: 40px;
width: 100px;
border: $border; //使用变量
}
```
使用koala编译后：
- **默认变量**
```scss
$bgColor:red !default; // 给这个变量赋默认的值red （这个是默认变量）
$bgColor:green; //这里修改了bgColor的默认值 （ 这个是普通变量 ）
$fontSize:20px;
$border:1px solid blue;
div{
background: $bgColor; //使用变量
height: 40px;
width: 100px;
border: $border; //使用变量
}
```
编译输出结果：
```css
div {
background: green;
height: 40px;
width: 100px;
border: 1px solid blue;
}
```
- **全局变量和局部变量**
```scss
$bgColor:red !default;
$fontSize:20px;
$border:1px solid blue;
//上面3个变量是全局变量
div{
//这个变量是局部变量
$bgColor:yellow;
background: $bgColor; // 这里使用的是局部变量
height: 40px;
width: 100px;
border: $border; //使用变量
}
```
## 2.嵌套
- **选择器嵌套**
第一种写法
```scss
$bgColor1:red;
$bgColor2:green;
$bgColor3:blue;
.box{
width: 300px;
height: 300px;
background: $bgColor1;
.test1{
width: 200px;
height: 200px;
background: $bgColor2;
.test2{
width: 100px;
height: 100px;
background: $bgColor3;
}
}
}
```
第二种写法
&代表是所在父亲的选择器
```scss
$bgColor1:red;
$bgColor2:green;
$bgColor3:blue;
.box{
width: 300px;
height: 300px;
background: $bgColor1;
& div{
width: 200px;
height: 200px;
background: $bgColor2;
& p{
width: 100px;
height: 100px;
background: $bgColor3;
}
}
}
```
- **其它的嵌套**
```scss
$bgColor1:red;
$bgColor2:green;
$bgColor3:blue;
.box{
width: 300px;
height: 300px;
background: $bgColor1;
& div{
width: 200px;
height: 200px;
background: $bgColor2;
& p{
width: 100px;
height: 100px;
background: $bgColor3;
&:hover{
opacity: 0.5;
}
border: {
top: 2px dashed pink;
};
}
}
}
```
## 3.混合
- **定义不接受参数的混合**
```scss
//使用@mixin定义混合
@mixin Radius{
border-radius: 20px;
}
.test1{
width: 200px;
height: 50px;
background: red;
//使用@include调用混合
@include Radius;
}
```
编译后的结果：
```scss
.test1 {
width: 200px;
height: 50px;
background: red;
border-radius: 20px;
}
```
- **定义接受参数的混合**
1.接受一个参数
```scss
//接受一个参数
@mixin Radius($Radius){
border-radius: $Radius;
}
.test1{
width: 200px;
height: 50px;
background: red;
//传递一个参数
@include Radius(30px);
}
```
2.接受一个参数，并初始化默认值
```scss
@mixin Radius($Radius:50px){
border-radius: $Radius;
}
.test1{
width: 200px;
height: 50px;
background: red;
//没传递参数会使用默认值50px
@include Radius; // or @include Radius();
}
```
3.接受多个参数
```scss
//接受多个参数
@mixin Radius($Radius:50px,$Border:1px solid blue){
border-radius: $Radius;
border:$Border;
}
.test1{
width: 200px;
height: 50px;
background: red;
//没传递参数会使用默认值
@include Radius; // or @include Radius();
}
```
