2022-04-17 Sass学习笔记(二) Sass的语法:变量,条件分支,循环,mixin

1.变量

常见使用场景

把css文件中经常使用的颜色设置为一个变量,
当用户需要不同的主题时,只需要改变此变量的值即可,
而不是修改每一个css文件中涉及到背景色,字体颜色的代码行

语法

$variablename: value;

定义:$变量名:变量值

使用:元素属性名:$变量名

示例

index.scss

$color1:blue;
$color2:white;
$num:150px;
div {
   
    height: $num*2;
    width: $num*2;
    background-color: $color1;
    p {
   
        height: $num;
        width: $num;
        margin: 0 auto;
        background-color: $color2;
        border-radius: 50%;
    }
}

生成的index.css

div {
   
  height: 300px;
  width: 300px;
  background-color: blue;
}

div p {
   
  height: 150px;
  width: 150px;
  margin: 0 auto;
  background-color: white;
  border-radius: 50%;
}

2.条件分支

常见使用场景

语法

@if(判断语句){
   
	css代码1