SCSS使用技巧-基础

变量

🍎 变量，以$开头 (这是全局变量)

• scss

$border-color: #f0f !default; //声明变量
p {
	margin: 0;
}
.container {
	$border-width: 1px; //（这是局部）
	border: $border-width solid $border-color; //在属性值中使用变量
}

• css

p {
  margin: 0px;
}

.container {
  border: 1px solid #f0f;
}

1. 变量名使用中划线或下划线都是指向同一变量的
2. 后定义的变量声明会被忽略，但赋值会被执行，这一点和ES5中var声明变量是一样的。

注释

• 🍎🍎注释有两种

（1）/*注释*/:这种注释会被保留到编译后的css文件中。

（2）//注释:这种注释不会被保留到编译后生成的css文件中。