scss 笔记

1、变量

$nav-width: 100px;
nav {   
    width: $nav-width; 
}

2、嵌套(&，群组嵌套)

#content { 
   nav{ 
        h1, h2, h3 {margin-bottom: .8em}
    }
    nav, aside {
      a {color: blue}
    }
    article { 
        &:hover { 
            color: #333 
        } 
    } 
}

3、选择器（+，>，～）

>    直接子元素
+    直接后元素
～   同层后元素

4、导入scss文件

    @import    "color.scss"

5、嵌套导入

    .blue-theme {@import"blue-theme"}

6、原生css导入需要将后缀改为.scss,scss兼容css

7、默认变量

    $width: 400px ! default;

8、注释

1. // 单行注释 编译文件不显示
2. /* */ 编译文件显示，代码块内的除外

9、混合器

    @mixin rounded-corners {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    notice {
        background-color: green;
        border: 2px solid #00aa00;
        @include rounded-corners;
}

10、混合器传参（默认参数）

    @mixin link-colors($normal, $hover : $normal, $visited : $normal) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }
    }
    a {
        @include link-colors(
            $normal: blue,
            $visited: green,
            $hover: red
        );
    }

11、继承

    .error {
        border: 1px solid red;
        background-color: #fdd;
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }

12、继承和混合器区别

1. 混合器：代码块的复用
2. 继承：解决一类问题

13、占位符选择器

14、函数指令

    @function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
    }
    #sidebar { width: grid-width(5); }
    #sidebar {width: 240px; }