最近用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;
}