sass中文注释的解决方法和一些简单用法

最近用sass来编写项目中的css，发现不能添加中文注释，报错如下

于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决。

 

在此顺便记录一些sass的常用技巧。

注释：

 /* 我是注释 */    ，会保留到编译后的文件。
// 我是注释   ，只保留在SASS源文件中，编译后被省略。

　/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 
　　　　我是重要注释！
　　*/

 

变量：

$w : 1000px;
$b-w : 10px;

ul{
    width: $w/2;
    border-width: $b-w;
}

 在解析后的css文件中代码显示为

ul {
  width: 500px;
  border-width: 10px;
}

 

@mixin命令：

@mixin left($m-l:10px,$m-r:20px){   //类似于函数声明一样，用@mixin来定义一个left，括号中内容及括号可不填，根据需求来
    float: left;
    margin-left: $m-l;
    margin-right: $m-r;
}

li{
        width: 200px;
        height: 50px;
        @include left(50px,100px); //用@include来引入，其中left中可传入变量的值，不写的话即为默认10px，20px
}

　解析后的css

li {
  width: 200px;
  height: 50px;
  float: left;
  margin-left: 50px;
  margin-right: 100px;
}

　

继承：

.box1{
    border: 1px solid #FF0000;
    background: blue;
}

.box2{
    @extend .box1; //继承box1的属性
    width: 200px;
    height: 200px;
}

　解析后的css

.box1, .box2 {
  border: 1px solid #FF0000;
  background: blue;
}

.box2 {               ////box2的额外属性会单独写出
  width: 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;
}