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

时间:2023-01-30 08:32:12

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

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

于是查阅了一下发现需要在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;
}