sass 学习笔记（一）：嵌套，变量，operation。。。基本就是翻译了一遍官网

工欲善其事必先利其器，先在sublime 2下安了一个sass高亮插件。下载地址在这里。解压后直接放到data的packages下面。会报错说有个文件配置不对，但重启sublime后的确加亮了，说明起作用了。

官网在此

sass基础：
1、 嵌套。selector 和 property 都可以嵌套。

2、 换变量。如果变量在某个selector嵌套层里面，那它只在该层起作用，但可用!global强制其为全局变量.
!important： 不能在property的嵌套层中用变量。

#main {    $mid:50% !global;    background: {        color:yellow;        clip:content-box;        // $mid:50% !global;               position: $mid $mid;    }    font:20px/25px fantasy{        weight:$mid;// wrong property , only to show that it works        color:red;    }}.ff{    font:fantasy;    margin: $mid;}

它会被编译成：

#main {  background-color: yellow;  background-clip: content-box;  background-position: 50% 50%;  font: 20px/25px fantasy;    font-weight: 50%;    font-color: red; }.ff {  font: fantasy;  margin: 50%; }

另外注意/**/中的comments也会被编译到css中，且支持变量替换。但变量要加引号转为string形式。普通的property变量则不要加。例子如下：

$commmonwidth:"40px";.ff{    width: #{$commmonwidth};    width: $commmonwidth;}/*the #{$commmonwidth} is a string*/

.ff {  width: 40px;  width: "40px"; }/*the 40px is a string*/

试了一下，虽然官网中的例子里commments中引用变量用了#{$commmonwidth}这种形式，但去掉#也没影响，到底#是咋回事，往下看，看3。

变量中-与_可以互换。$main-width 等于 $main_width

3、7种变量类型
其余的会被当做 unquoted string
- 数字，10，10px
- 字符串，带不带“”都行，
- 颜色，#fff
小心选择器的名字中夹杂了颜色
- true/false
- null
- 数组，以空格或，间隔，可以用括号或不同的间隔符表示二维数组，and trailing comma is recommended
- map.可以看做对象，但每个value都是字面量，固定形式
$map: (key1: value1, key2: value2, key3: value3);
map key 可以是任一种sass data type。
map不会被直接转为css,但可以用inspect($value)来转一个字符串检查。

4、operations
数字可以加减乘除，%， 而且是有单位的！！单位必须紧跟在数字后面 不要空格不要空格不要空格
看高亮的颜色就知道自己写对了没有
乘除可以直接用变量&数字来做，但加减只能变量对变量，或直接数字加减，margin-left: 5px + 8px/2px; 不然容易报错。特别是如果直接写的话，+和-还不一样，+的语法格式很宽松，但-就很严格，建议写的时候以加负数的形式来写。

$w:100px;$e:100;$q:20px;.redff{    font:fantasy;    // margin: $w-2; 这样不行滴    margin:$w+2; //这个就可以    margin: $w%2;    padding: $q+$w;}

会被编译成这样：

.redff {  font: fantasy;  margin: 102px;  margin: 0px;  padding: 120px; }

其实-这么严格是有道理的，因为它有太多含义了。。。官方建议是这样的：

• 如果要做减法，前后加空格
• 如果是取负数，前加后不加
• 如果是运算式中表示list，加空格，加括号 10px (-$var)

color的加减乘除是分段式的，r,g,b分别做。a是属性相同的才能一起运算，且不改变a的值
opacify和transparentize分别可以增加a和降低a。用法是：

color: opacify($translucent-red, 0.3);background-color: transparentize($translucent-red, 0.25);

string的相加中，quoted string 和 unquoted string 是谁在前，遵循谁的格式。

p:before {  content: "Foo " + Bar;  font-family: sans- + "serif";}

编译为

p:before {  content: "Foo Bar";  font-family: sans-serif; }

5、interpolation #{}
#{}可以把quoted string转成unquoted(直接取其值)，这样可以直接在字符串中引用。在一些时候，比如在mixin中使用selector的名字时会更方便。
再比如。

//这是错误的写法！！！！！$name:foo;$attr:border;p.$name {     $attr-color: blue;}

这时候就会报错了，Error: Invalid CSS after “p.”: expected class name, was “$name” on line 4 of play.scss
正确的姿势是

p.#{$name} {     #{$attr}-color: blue;}

会编译成：

p.foo {  border-color: blue; }

再比如

p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}

it will be treated as plain css.
otherwise:

//scss:p {  $font-size: 12px;  $line-height: 30px;  font: $font-size/$line-height;}//css:p {  font: 0.4; }

&代指父选择器，两种用处。

1. 在嵌套层中引用平行状态。如伪类。

a {  &:hover { text-decoration: underline; }  body.firefox & { font-weight: normal; }}// and  it  will  be compiled  to:  a:hover {    text-decoration: underline; }  body.firefox a {    font-weight: normal; }

还可以用来指变量。比如

.foo.bar .baz.bang, .bip.qux {  $selector: &;}

等于重设了selector变量的值，是个list, ((“.foo.bar” “.baz.bang”), “.bip.qux”). 但能干啥还不知道。
可以在@mixin 中以@if @else的方式来判断有无父元素

!default
在变量命名中加上!default ，会”没有就加上，有就不管它“，这里的没有既是指unassigned也是null。