SASS的介绍和应用示例入门

1.SASS介绍

SASS是基于Ruby的 CSS预处理器。less是基于JavaScript的CSS预处理器。

对于大文件的编译，SASS是略胜less。

2.应用示例

入门小网站：www.w3cplus.com/sassguide/

建立如下工程目录：

|test

  |-index.scs

(1)变量

index.scss的代码如下：

$fontStack:Helvetica, sans-serif;

$primaryColor:#333;

body{

   font-family:$fontStack;

   color:$primaryColor;

}

h1{

  color:$primaryColor;

}

编译:sass index.scsss >index.css

(2)嵌套

//sass style

//--------------------------------

nav {

  ul{

    margin:0;

    padding:0;

    list-style:none;

  }

  li{

    display:inline-block;

  }

  a{

    display:block;

    padding:6px 12px;

    text-decoration:none;

  }

}

编译：sass index.scss >index.css

(3)导入

//reset.scss

html,

body,

ul,

ol{

  margin:0;

  padding:0;

}

//base.scss

@import 'reset';

body{

  font-size:100% Helvetica,sans-serif;

  background:#efefef;

}

更多的例子可以看看网站的链接。