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 /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语言*/

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

    ffff


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*/