Sass 快速入门

学习原因：
$ $ 最近使用vue3时发现里面使用了sass，于是了解一下sass使用方法

1. sass 是什么？

1. 图标
   Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言

2. sass 特点

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

2. 可以使用巢状、混入、选择子继承等功能
3. 更有效有弹性的写出Stylesheet
4. 本身的语法并不太容易让浏览器识别
5. 变量

-  变量以美元符号（$）作为开头。变量用冒号（:）赋值
- 数值（可包括单位）、字符串、颜色、布尔类型
- 嵌套
- 混入（Mixin）
- libSass（可以扩展了解一下）

3. sass使用

1. 使用变量:
 	1.1 sass使用$符号来标识变量
	1.2 任何可以用作css属性值的赋值都 可以用作sass的变量值;
	1.3 空格分割的多个属性值
	1.4 逗号分割的多个属性值
	1.5 变量可以在css规则块定义之外存在(不同与css),当变量定义在css规则块内，那么该变量只能在此规则块内使用

eg:
$basic-border: 1px solid black;
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue";

# ==========1.5=============
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

2. 嵌套规则

css 使用时：重复写选择器是非常恼人

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

sass可以让你只写一遍，且使样式可读性更高。编译之后和css 一样。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
//  一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块
#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

3. 父选择器的标识符&

当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。

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

但是color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！
父选择器能对于嵌套规则如何解开提供更好的控制

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

	群组选择

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

// 等价

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

只会选择article下紧跟着的子元素中命中section选择器的元素。
article > section { border: 1px solid #ccc }

同层相邻组合选择器+选择header元素后紧跟的p元素：
header + p { font-size: 1.1em }

同层全体组合选择器~
article ~ article { border-top: 1px dashed #ccc }

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

嵌套属性：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
// ==》
nav {
  border: 1px solid #ccc {
  // 你甚至可以像下边这样来嵌套，指明例外规则：
  left: 0px;
  right: 0px;
  }
}

3.导入SASS文件:@import规则
css 使用时 只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass 的@import不需要指定导入文件全名，可以省略后缀

• 导入部分文件：此约定即，sass局部文件的文件名以下划线开头，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入，可以省略文件名开头的下划线
  eg:
  想导入
  themes/_night-sky.scss
  样式表中写
  @import “themes/night-sky”;

• 默认变量值: 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

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

• 嵌套导入
  局部文件会被直接插入到css规则内导入它的地方

• 原生css 导入
  把原始的css文件改名为.scss后缀，即可直接导入了。

     4.混合器@mixin
  

/*定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。*/
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通过@include来使用这个混合器，放在你希望的任何地方

notice {
  background-color: green;
  @include rounded-corners;
}

使用混合器场景:

如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器;
判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字------>高度抽象，实现的样式

混合选择器特点:

• 不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性.

• 并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参

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

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

• @include混合器时不必传入所有的参数,给参数指定一个默认值

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

@include link-colors(red) $hover和$visited也会被自动赋值为red。

• 选择器继承@extend(基于Nicole Sullivan面向对象的css的理念)

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

继承如果不合理使用，能会让生成的css中包含大量的选择器复制。避免这种情况出现的最好方法就是不要在css规则中使用后代选择器.foo .bar { @extend .baz; } .bip .baz { a: b; }