SASS学习笔记

两种后缀名文件：
   一种后缀名为sass，不使用大括号和分号；
   一种是scss文件，和平时写的css文件格式差不多，使用大括号和分号。
sass 在线工具  http://sassmeister.com/

//文件后缀名为sass的语法
p
  background: #0982c1
//文件后缀名为scss的语法  
p{
  background: #0982c1;
} 

1.定义变量：

$变量名：值 ！default

值后面加上!default则表示默认值，在默认变量之前重新声明下变量即可覆盖。

$fontSize: 12px;//普通变量
$baseLineHeight:1.5 !default;//默认变量

$baseLineHeight:2;//覆盖默认变量
$baseLineHeight:1.5 !default;

3.嵌套
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器

属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

跳出选择器嵌套：@at-root 也就是@at-root (without:rule)。
默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root (without: ...)和@at-root (with: ...)
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。

//跳出media和父级
@media print {
  .parent3{
    color:#f00;

    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}

@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}

4.@mixin声明混合
可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

5.注释：
标准的css注释方式    /*会被编译*/
双斜杆形式的单行注释 //不会被编译

学习教程指引：→→
http://www.w3cplus.com/sassguide/