1. Sass学习笔记

1.1. 安装

npm命令安装

npm i -g sass

1.2. 使用介绍

1.2.1. 编译Sass

$ sass style.scss

1.2.2. 编译Sass为css文件

格式：sass 输入路径:输出路径

$ sass style.scss style.css

1.2.3. 自动编译Sass

格式：sass --watch 输入文件目录:输出文件目录 注意：生成的css文件名和sass文件名一样

npm --watch sass:css

1.2.4. 修改编译输出css的格式

命令：sass 输入:输出 --style 编译格式 注意：可搭配同步编译（--watch）使用

• 嵌套（默认）：nested

  ul{
      font-size: 15px; }
      ul li{
          list-style: none; }
  

• 紧凑：compact

  ul { font-size: 15px; }
  ul li { list-style: none; }
  

• 扩展：expanded

  ul{
      font-size: 15px;
  }
  ul li {
      list-style: none;
  }
  

• 压缩：compressed

  ul{font-size:15px;}ul li{list-style:none}
  

1.3. Sass变量

变量用于存储一些信息，它可以重复使用。Sass 变量可以存储以下信息：

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• null 值 Sass 变量使用 $ 符号：

$name:value;

1.3.1. 作用域

• Sass 变量的作用域只能在当前的层级上有效果
• Sass 中可以使用!global关键词来设置变量是全局的

1.3.2. 默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。 假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。

$fancybox-width:400px!default;
.fancybox{
    width:$fancybox-width;
}

1.4. Sass 嵌套规则与属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1.4.1. Sass 嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。在 Sass 中，我们可以使用嵌套属性来编写它们：

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

1.4.2. 父选择器的标识符&

一般情况下，sass在解开一个嵌套规则时就会把父选择器通过一个空格连接到子选择器的前边，这种在CSS里边被称为后代选择器。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。 最常见的一种情况是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。最常见的一种情况是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作：

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

这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！ 解决之道为使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。

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

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：

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

1.4.3. 群组选择器的嵌套

1.4.3.1. 父级相同

.container {
    h1, h2, h3 {margin-bottom: .8em}
}

编译后：

.container h1, .container h2, .container h3 {
    margin-bottom: .8em
}

1.4.3.2. 子级相同

nav, aside {
    a {color: blue}
}

编译后：

nav a, aside a {
    color: blue
}

1.4.4. 子组合选择器和同层组合选择器：>、+和~

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边：

article {
    ~ article { border-top: 1px dashed #ccc }
    > section { background: #eee }
    dl > {
        dt { color: #333 }
        dd { color: #555 }
    }
    nav + & { margin-top: 0 }
}

编译后：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

1.5. Sass @import;

Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。 我们可以安装不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。

1.5.1. Sass 导入文件

类似 CSS，Sass 支持 @import 指令。 Sass @import 指令语法如下：

@import filename;

注意：

• 包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
• 此外，你也可以导入 CSS 文件。
• 导入后我们就可以在主文件中使用导入文件等变量。
• sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。

1.5.2. Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。但是，在导入语句中我们不需要添加下划线。Sass Partials 语法格式：

_filename;

1.6. Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 @include 指令可以将混入（mixin）引入到文档中。

1.6.1. 定义一个混入

混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }

@mixin important-text{
    color:red;
    font-size:25px;
    font-weight:bold;
    border:1px solid blue;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

1.6.2. 使用混入

@include指令可用于包含混入

selector{
    @include mixin-name;
}

混入中也可包含混入

@mixin special-text {
    @include important-text;
    @include link;
    @include special-border;
}

1.6.3. 向混入传递变量

混入可以接收参数。

@mixn bordered($color,$width){
    border:$width solid $color;
}
.myArticle{
    @include bordered(blue,1px);
}
.myNotes{
    @include bordered(red,2px);
}

混入的参数也可以定义默认值，语法格式如下：

@mixin bordered($color:blue,$width:1px){
    border:$width solid $color;
}

1.6.4. 可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}
.shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

1.6.5. 浏览器前使用前缀

浏览器前缀使用混入也是非常方便的。如下实例：

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.myBox {
    @include transform(rotate(20deg));
}

1.7. Sass @extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.button-basic  {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button-report  {
    @extend .button-basic;
    background-color: red;
}

.button-submit  {
    @extend .button-basic;
    background-color: green;
    color: white;
}

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。