摘要：
}在解析的css文件中，代码显示为ul｛500px；border-10px；｝li｛200px；float:left；margin-left:.box1{border://inheritsbox1；的属性200px；。box2｛border:蓝色；高度：200px；h3｛background:红色；｛color:.containh3｛背景：红色；
最近用sass来编写项目中的css，发现不能添加中文注释，报错如下
于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决。
在此顺便记录一些sass的常用技巧。
注释：
/* 我是注释 */ ，会保留到编译后的文件。 // 我是注释 ，只保留在SASS源文件中，编译后被省略。
/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*! 我是重要注释！ */
变量：
$w : 1000px;
$b-w : 10px;
ul{
$w/2;
border- $b-w;
}在解析后的css文件中代码显示为
ul {
500px;
border- 10px;
}
@mixin命令：
@mixin left($m-l:10px,$m-r:20px){ //类似于函数声明一样，用@mixin来定义一个left，括号中内容及括号可不填，根据需求来
float: left;
margin-left: $m-l;
margin-right: $m-r;
}
li{
200px;
height: 50px;
@include left(50px,100px); //用@include来引入，其中left中可传入变量的值，不写的话即为默认10px，20px
}
解析后的css
li {
200px;
height: 50px;
float: left;
margin-left: 50px;
margin-right: 100px;
}
继承：
.box1{
border: 1px solid #FF0000;
background: blue;
}
.box2{
@extend .box1; //继承box1的属性
200px;
height: 200px;
}
解析后的css
.box1, .box2 {
border: 1px solid #FF0000;
background: blue;
}
.box2 { ////box2的额外属性会单独写出
200px;
height: 200px;
}
//继承主要用于精简css的代码
一些其他的简单写法
//scss代码
.contain{
h1,h2,h3{
background: red;
}
}
ul{
background: {
color: #ccc;
image:url("img/1.jpg");
repeat:no-repeat;
}
}
//解析后的css代码
.contain h1, .contain h2, .contain h3 {
background: red;
}
ul{
background-color: #ccc;
background-image: url("img/1.jpg");
background-repeat: no-repeat;
}