1.变量可以在sass中定义变量，方便统一修改和维护。//sass风格//------------------------------------$fontStack:Helvetica,sans-serif;$primaryColor:#333;body{字体系列:$fontStack;color:$primaryColor;}//cssstyle//------------------------------------body{字体-家族：Helvetica，无衬线字体；color:#333;}2.Nestedsass可以嵌套选择器来表示层级关系，看起来非常优雅整洁。//sass风格//--------------------------------nav{ul{margin:0;填充：0；列表样式：无；}li{显示：内联块；}a{显示：块；填充：6px12px；文字修饰：无；}}//css样式//-----------------------------------navul{margin:0;填充：0；列表样式：无；}navli{display:inline-block;}nava{display:block;填充：6px12px；text-decoration:none;}3.导入sass比如导入其他sass文件，最后编译成css文件，比纯css好@import//sassstyle//----------------------------------//_reset.scsshtml,body,ul,ol{margin:0;padding:0;}//sass风格//------------------------------------//基础。scss@import'reset';body{font-size:100%Helvetica,sans-serif;背景颜色：#efefef;}//css样式//----------------------------------html,body,ul,ol{保证金:0;padding:0;}body{背景颜色：#efefef;font-size:100%Helvetica,sans-serif;}4.mixinSass可以使用mixin定义一些代码片段，可以传递参数，方便以后根据需要调用。从此以后处理CSS3前缀兼容问题就简单方便了。//sass风格//------------------------------------@mixinbox-sizing($sizing){-webkit-box-sizing:$sizing;-moz-box-sizing:$sizing;box-sizing:$sizing;}.box-border{border:1pxsolid#ccc;@includebox-sizing(border-box);}//css样式//-----------------------------------.box-border{border:1pxsolid#ccc;-webkit-box-sizing：边框框；-moz-box-sizing：边框框；box-sizing:border-box;}5.扩展/继承sass可以通过@extend组合声明实现代码，使代码更加优越和简洁。//sass风格//--------------------------------。消息{边框：1px实心#ccc;填充：10px；颜色：#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}.warning{@extend.message;-color:yellow;}//css样式//------------------------------------.message,.success,.error,.warning{border:1pxsolid#cccccc;填充：10px；color:#333;}.success{border-color:green;}.error{border-color:red;}.warning{border-color:yellow;}6.操作sass可以进行简单的加减乘除操作等//sass风格//----------------------------------.container{width:100%；}article[role="main"]{浮动：左；宽度：600px/960px*100%;}aside[role="complimentary"]{float:right;宽度：300px/960px*100%;}//css样式//----------------------------------.container{width:100%;}article[role="main"]{float:left;width:62.5%;}aside[role="complimentary"]{float:right;width:31.25%;}7.colorsass中集成了大量颜色函数，使得更改颜色更容易//sass样式//------------------------------------$linkColor:#08c;一个{文字装饰：无;颜色：$链接颜色；&:hover{颜色:变暗($linkColor,10%);}}//css样式//--------------------------------a{text-decoration:none;颜色：#0088cc;}a:hover{颜色：#006699;}
