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;

}