SASS学习笔记！（持续学习中..）

工具  ： koala     

学习网址 ： http://www.w3cplus.com/sassguide/syntax.html

　　　　　  http://sass-lang.com/documentation/Sass/Script/Functions.html#unquote-instance_method

 

1.sass使用//双斜杠注释向JS一样是单行注释 单行注释不会输出到css中 /**/注释概念相反

2.sacc变量名必须以$开头 后面紧跟着变量名 变量名与值依然是用：分开 $fontSize : 12px;

3.如果属性后面加上 ！default 就是设置为默认值（默认值前面可以写上其他值，这样调用的时候就会调用其他值）
例：
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body {
line-height: $baseLineHeight;
}

编译后：

body {
line-height:2;
}

4.特殊变量 定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{}形式
$variables使用。
例：
$borderDirection: top!default;
$baseFontSize:12px !default;
$baseLineHeight: 1.5 !default;

应用在class和属性的时候
.border-#{$borderDirection} {
border-#{$borderDirection}:1px solid #ccc;
}

应用于复杂的属性值
body {
font:#{$baseFontSize}/#{$baseLineHeight};
}

编译结果：
.border-top {
border-top:1px solide #ccc;
}
body {
font:12px/1.5;
}

5.多值变量（List类型和Map类型）

List类型：（类似数组）
可以通过空格 ，逗号（，）或者括号（‘（）’）分割多个值
取值用 nth(对象，下标)

例：
定义：
一维数据
$px： 5px 10px 15px 20px;
二维数据
$px: 5px 10px,15px 20px;
$px: (5px 10px) (20px 30px);
使用：
$linkColor: #08c #333 !default;

a {
color:nth($linkColor,1);

&:hover {
color:nth（$linkColo,2）;
}
}

编译后：

a {
color:#08c;
}
a:hover {
color:#333;
}

Map类型：（类似对象）
必须以键值对 成对出现（key:value,key1:value） 其中value可以使List类型

例：
定义：
$heading:(h1:1rem,h2:2rem,h3:3rem);

使用：
$heading:(h1:1rem,h2:2rem,h3:3rem);
@each header , $size in $heading {
#{header} {
font-size:$size;
}
}
编译后：
h1 {
font-size:1rem;
}
h2 {
font-size:2rem;
}
h3 {
font-size:3rem;
}