SCSS/SASS编译


SASS与SCSS

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

SCSS/SASS编译

转载请注明出处:http://www.fed123.com/2015/09/08/2015_scss/

区别

sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//.sass
.div
color: blue
.b
color: black
font-weight: bold
text-decoration: none
.c
color: white
//.scss
.a {
color: blue;
font-weight: bold;
text-decoration: underline;
.b {
color:black;
}
}

编译

单文件转换命令

1
sass style.scss style.css

单文件监听命令

1
sass --watch style.scss:style.css

文件夹监听命令

1
sass --watch sassstyle:stylesheets

我们一般常用的有 –style , –sourcemap , –debug-info 等。

1
2
3
4
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

–style 表示解析后的css是什么格式,有四种取值分别为:nested,expanded,compact,compressed。
–sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
–debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

四种style生成后的css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// nested
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
// expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

谢谢!

转载请注明出处:http://www.fed123.com/2015/09/08/2015_scss/

欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

未经允许不得转载:皓眸大前端 » SCSS/SASS编译

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址