浅析sass(一)
阅读:3913 次 编辑日期:2015-08-16
目录:
概述:
由于最近工作交接,之前的代码有一些是sass写的,所以这几天看了看sass,最近几次简单的分享一下,希望对大家有帮助。
sass文件后缀名:
sass有两种后缀名文件,一种是后缀名为sass的,在这类型的文件中,不适使用大括号和分号,如下。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
另一种是后缀名为scss的,在这类型的文件中,使用大括号和分号,跟我们平时写的CSS基本一样,如下。
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
导入:
sass使用@import来导入,编译的时候会最后生成一个css文件,但是你导入的是css文件的话,那么这个css文件的内容不会生成在最后编译出来的css文件中。
在导入sass文件的时候可以不写.scss的后缀名,一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。
//a.scss
//-------------------------------
body {
background: #eee;
}
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
从结果看出,要是导入css文件,最后生成的文件还是有@import "reset.css";,导入的sass文件就会生成css。
注释:
分多行注释/**/,跟单行注释//,注释不会出现在最后生成的文件内。