sass预处理初入门

关于 中文编译 出错的问题，需要指定字符集。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
$fontSize: 12px;
body{
    font-size:$fontSize;
}
/* 测试注释 */
　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

注释的问题 ，sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

数据结构 方面，它拥有类似 数组 的list类型，类似 对象 的map类型

sass的数组，是通过空格来划分元素，如果是二维组数，则需要用到小括号与逗号。

//一维数组
$array: 5px 10px 20px 30px;

//二维数组
$array2: 5px 10px, 20px 30px;
$array3: (5px 10px) (20px 30px);

sass的数组有一个特点，没有用[]包起来，也不能用[]来取其中的某一个元素，要用需要用到nth内置方法，并且nth与CSS3的nth-child一样，是从1开始。

$linkColor:      #08c #333 #ccc;
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}