SASS基础——CSS扩展语言

一、变量$

可以把反复使用的css属性值 定义成变量，通过变量名来引用它们

1、声明变量，如$basic-border: 1px solid black;

作用域：变量在CSS规则块内定义则作用域为块内，在块外定义则全局使用。

变量名：在SASS中下滑线和中划线可以互相通用，但纯CSS的地方不行

2、使用变量

可以在CSS属性的标准值可存在的任何地方使用它，改变变量的声明即可改变所有引用的值

二、嵌套CSS规则

1、父级的CSS可以嵌套子级的，这样可以减少重复书写且逻辑清晰

2、父选择器标识符，当使用伪类 如:hover时， 通过嵌套规则会直接拼接 所有父级都会作用到:hover，此时使用父选择器标识符

&:hover  此时，&会被直接父级替换

3、群组选择器也可以嵌套

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

4、组合选择器

①直接子选择器>     article > section 第一级子级的所有section被选中

②同层相邻组合选择器 +    同级别的两个兄弟选择器 用+连接 同时选中

③同层全体组合选择器 ~  

这些组合选择器可以用在SASS的嵌套规则中

5、嵌套属性

用-分隔开的属性名也可以嵌套，如border-styleborder-widthborder-color

把-用:替换，后紧跟{ }。{ }内的内容会与：结合再用-替换回来

border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }

三、导入SASS文件

SASS的@import规则是在生成CSS文件时就把相关文件导入进来

1、使用SASS部分文件：

SASS局部文件的文件名以下划线开头，就不会在编译时单独编译这个文件输出css，引入时可省略下滑线

2、默认变量值：后面的变量值会覆盖前面的

3、嵌套导入：

sass允许@import命令写在css规则内，局部文件会被直接插入到css规则内导入它的地方

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

4、原生CSS导入

不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import，可以把CSS文件后缀改成.SCSS再导入

5、静默注释

CSS标准注释： /*  */，当此注释出现在CSS不允许的地方也会被抹去

静默注释：//  静默注释的内容不会出现在生成的CSS文件中

四、混合器

1、混合器：实现大段样式的重用

使用@mixin 声明混合器，在样式表中通过@include来使用这个混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

@include rounded-corners;

2、给混合器传参数，实现多样化混合器

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

@include link-colors(blue, red);

语法$name: value的形式指定每个参数的值，就不必在乎参数顺序了，如

 @include link-colors($normal: blue , $visited: green);

3、混合器默认参数值

$name: default-value的声明形式，在@mixin 参数中传入默认参数

五、选择器继承@extend

选择器继承：一个选择器可以继承为另一个选择器定义的所有样式，如 @extend .styleA

不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会以组合选择器的形式继承

使用场景：一个类是另一个类的细化，而且样式遍布各地。