1、Sass学习记录官网：https://www.sass.hk/guide/ 1、变量 1.1 定义变量 1.2 使用

官网：www.sass.hk/guide/

1、变量

1.1 定义变量

$highlight-color: #F90;

1.2 使用变量

nav {
  color: $highlight-color;
  background-color: $highlight-color;
}

2、中划线还是下划线

注释：变量使用中划线还是下划线，这完全取决于个人的喜好，使用中划线的方式更为普遍，这也是compass和本文都用的方式。Sass这两种用法相互兼容，可以相互引用。俄罗斯套娃，无限嵌套。

$link-color: blue;
a {
  color: $link_color;
}

3、选择器

1、& -- 父选择器

article a {
  color: blue;
  &:hover { color: red }
}

======

article a { color: blue }
article a:hover { color: red }

2、群组选择器

.button, button {
  margin: 0;
}

3、> -- 子组合选择器选择nav里面的div

    <nav>
        <div></div>
    </nav>
    
    
    <style lang="scss>
    nav {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }

    nav>div {
        width: 10px;
        height: 10px;
        border: 1px solid red;
    }
</style>

4、+ > 同层相邻组合选择器选取相同层级的元素标签

    <header>
        123
    </header>
    
    
<style lang="scss>
 header+p {
     width: 100px;
     height: 100px;
     border: 1px solid red;
 }
</style>
header + p { font-size: 1.1em }

5、~全体组合选择器

<body>
    <header>
        <p>123123</p>
    </header>
    <p style="margin-top: 15px;">456</p>
</body>


<style lang="scss>
    header~p {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>

6、基础混合器

// 定义混合器
@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;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

7、混合器传参

// 定义
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 使用
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }