Sass初涉

经历数不清日月的颓废之后，决定重新坚持自己的前端之路，说实话，到现在 ，对前端是很迷茫的，前端这个行业，真是应了那句话，“学了不一定有用”，更新换代太快，基础已打牢。从昨天开始我开始深入学习前端，JS方面学习函数式编程和模块化（require，commentJS），css学习预处理语言sass，框架方面接触facebook的react。

那么今天便小小研究了一下sass
对于浸润了很多编程语言的我（。。。），sass的基础语法还是不是特别难的，但是他的特殊语法（自己的独特性方面）还是需要去实践记住。
一、sass的安装
sass是一个Ruby编写的（目前）世界上最成熟、稳定禾庆大的CSS扩展语言，当然通过Ruby安装，去Ruby官网下对应安装包，安装时注意选择自动添加path路径

之后使用Ruby的管理工具gem下载sass
  打开cmd 输入： gem install sass即可
  更新与删除 gem uninstall/update sass

一、Sass基础篇
①、命令编译(cmd)
sass <scssc存储路径>/test.scss:<转码后css路径>/test.css
//sass有很多参数，例如使用--watch可动态捕获scss文件的改变并重新转码
sass --watch style.scss:style.css

②、也可以使用GUI编译或者自动化编译
GUI推荐
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
自动化编译见慕课网
http://www.imooc.com/code/6380
③、(重要)sass有两个常见错误
第一个是因为字符编译引起的。Sass不支持“GBK”编译，所以创建Sass文件时，将文件编码设定为“utf-8”
第二个是因为路径中的中文字符引起的(***)
④、Sass有四种输出模式

sass --watch style.scss:style.css nested //嵌套sass --watch style.scss:style.css expanded //展开sass --watch style.scss:style.css compact //紧凑sass --watch style.scss:style.css compressed //压缩

效果一实验便知，在此不赘述。。。推荐使用compressed
⑤、Sass变量
类似PHP，使用美刀符号

$color :red; /*普通变量*/$color:red !default; /*默认变量*///8*全局变量和局部变量类似与C语言*/

⑥、嵌套
选择器嵌套(不建议使用)

<div><nav>    <a>ffff</a></nav></div>sass便可以如此写nav{ /*看不懂就算了*/    a{}    div &{}}

属性嵌套

.box{    border-top: 1px solid red;    border-bottom: 1px solid green;}sass书写.box{    border{        top:1px solid red;        bottom:1px solid green;    }}

伪类嵌套

.clearfix{    &:before{}    &:after{}}

嵌套初看上去挺有用的，但我感觉很大意义上有点废(个人观点)
⑦、混合宏，继承，占位符
    混合宏(优点在于可以带参数)

@mixin border{  /*声明*/    -webkit-border-radius: 5px;    border-radius: 5px;}/*可以带参数*/@mixin border($radius/*可以带默认值*/){  //声明    -webkit-border-radius: $radius;    border-radius: $radius;}/*复杂的参数宏 如果带多个参数可以用...替代*//*调用。引用@include*/.button{    @include border-radius(5px);}

但是混合宏的缺点也是很明显的，生成冗余的代码块。
    扩展/继承(@expand)

/*SCSS*/.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}.btn-second {  background-color: orange;  color: #fff;  @extend .btn;}翻译出来/*CSS*/.btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;}.btn-second {  background-clor: orange;  color: #fff;}

  占位(%placehoder，@expand引用)

%test{margin:50px;}div{@expand %test;

⑧、插值 #{}
插值目前的限制还非常大，待补充
⑨、注释可使用//行注释，/*段注释*/
有数据类型，大致与C语言相似，但是多出了颜色类型和值列表
⑩、支持四则运算(单位要相同)
加： 特殊之处在于 “+”，即可以连接字符串也可以连接字符属性

$content: "Hello" + "world!"; /*content :"Helloworld!"*/$e-resize:e+-resize;/*$e-resize:e-resize;*/

除：

/*不能同时带单位*/p {  font: 10px/8px;             /* 纯 CSS，不是除法运算*/  $width: 1000px;  width: $width/2;            /* 使用了变量，是除法运算*/  width: round(1.5)/2;        /* 使用了函数，是除法运算*/  height: (500px/2);          /* 使用了圆括号，是除法运算*/  margin-left: 5px + 8px/2px; /* 使用了加（+）号，是除法运算*/}

可进行颜色计算(分段计算两个数一组)

$color: #010203 + #040506; /*#050709*/$color: #010203 *2; /*#020406*/