Sass的一些功能简介-参照Sass官网

参考地址：http://sass-lang.com/guide

Sass是一种非常成熟、稳定的css扩展语言。它支持变量、嵌套、模板、导入、mixins等功能。以下描述可能有不当之处，敬请谅解！

1.变量

使用$符号代表变量的开始，如：

$font-stack: Helvetica, sans-serif;

body{
font: 100% $font-stack;
}

2.嵌套

如导航条的css，示例如下：

nav{
ul{
margin: 0;
padding:0;
list-style: none;
}
li{display:inline-block;}
}

3.模板

即在.scss文件里渲染其他的局部模板.scss文件

模板命名规则：_partial.scss,这种文件不会生成css文件，使用@import导入到其他.scss文件中

示例：两个文件_reset.scss和base.scss,使_reset.scss嵌入到base.scss中

//_reset.scss文件中的内容：

html,body,ul{
margin: 0;
padding: 0;
}

//base.scss文件中的内容：

@import 'reset'

body{
font: 100% $font-stack;
}

4.mixins

创建一个mixin：

@mixin border-radius($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

使用这个mixin，示例：

.box {@include border-radius(10px)}

5.扩展和层次

显示消息，包括错误、警告、成功等消息，示例：

.message{border: 1px solid #ccc;}

.success{
@extend .message;
border-color: green;
}

.error{
@extend .message;
border-color: red;
}

.warning{
@extend .message;
border-color: yellow;
}

6.运算符

示例如下：

.container{width: 100%}

article[role='main']{
float: left;
width: 100px / 900px * 100%;
}