sass技术中后缀名.sass和.scss的区别与个人推荐

zhouyl0 2012-07-22

sass是一种对css的一种提升,可以通过编译生成浏览器能识别的css文件。sass技术的文件的后缀名有两种形式:.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。

一个a.scss文件代码如下:

.a {
	color: blue;
	font-weight: bold;
	text-decoration: underline;
	.b {
		color:black;
	}
}

通过sassa.scssa.css编译出来的css文件为a.css:

.a {
  color: blue;
  font-weight: bold;
  text-decoration: underline; }
  .a .b {
    color: black; }

但是这样的代码将后缀改成.sass就不能通过编译了。首先.sass不要大括号,其次不需要分号,还有行首空格问题,比如第一个元素的属性空2个空格就不能通过编译。.sass文件需要严格的格式要求:

.div
 color: blue
 .b
  color: black
  font-weight: bold
  text-decoration: none
  .c
   color: white

编译后:

.div {
  color: blue; }
  .div .b {
    color: black;
    font-weight: bold;
    text-decoration: none; }
    .div .b .c {
      color: white; }

所以博主推荐大家使用.scss文件,使用起来更顺手。

交流群:132607763

若满了请加:251207741

相关推荐