参考地址: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%;
}