css预处理Sass入门

安装sass

cnpm install node-sass

sass文件后缀名

sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这里使用的 scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。 建议使用scss后缀的文件，以避免 sass 后缀名的严格格式要求报错

变量声明

格式：$变量名称

声明变量如下：

$basic-color: blue;

调用变量如下：

.App {
  color: $basic-color;
}

编译后：

.App {
  color: blue;
}

嵌套规则

后代选择器

在一个class中内嵌其他class，则如下：

.test {
  $basic-size: 14px;
  font-size: $basic-size;
  h3 {
    color: red;
  }
  div {
    color: pink;
  }
}

编译后：

.test {
    font-size:14px;
}

.test  h3 {
    color: red;
}

.test div {
    color: pink;
}

父选择器的标识符&

.parent a{
  &:hover {
    color: red;
  }
  
 .newcont & {
    color: gold;
  }
}

编译后：

.parent a:hover {
    color: red;
}

.newcont .parent a {
    color: gold;
}

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

子组合选择器>

.wrapcont {
  > .ni {
    color: red;
  }
}

编译后：

.wrapcont .ni {
   color: red;
}

同层相邻组合选择器+

.wrapcont {
  .ni+.ni+.spel {
    color: red;
  }
}

ni和spel是同层的

同层全体组合选择器~

.wrapcont {
  .ni~.spel {
    color: red;
  }
}

选择所有跟在.ni后面的同层.spel，不管他们之间隔了多少其他个元素

嵌套属性

这里我们经常会遇到属性名称有些部分是一样的，我们都要重复写一样的，很麻烦，这里就可以只要写一些即可，如下：

实例1：

.borderBox {
  border: {
    width: 10px;
    style: solid;
    color: red;
  }
}

编译后：

.borderBox {
    border-width: 10px;
    border-style: solid;
    border-color: red;
}

实例2：

.borderBox {
  border: 1px solid black {
   left: 0px;
   right: 0px;
  };
}

编译后：

.borderBox {
    border: 1px solid black;
    border-left: 0px;
    border-right: 0px;
}

默认变量值

如果我们重复声明一个变量的话：

$link-color: blue;
$link-color: red;

变量$link-color最终是最后一处声明才是它的值，这里如果不想让$link-color值随意被覆盖，就需要用到!default标签，它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$link-color: red;
$link-color: blue !default;

.testa {
  color: $link-color;
}

编译后：

.testa {
  color: red;
}

加上!default，则这个变量被声明了，要用他的声明值red

文件导入

1. 全局导入文件

@import url(./test.scss);

2. 嵌套导入

sass允许@import命令写在css规则内，如下：

在test.scss文件中写入：

.testscss {
  color: pink;
}

如果我们要调用test.scss中的内容，则

.testBox {
  @import url(./test.scss);
}

生成的内容跟如下是一样：

.testBox {
  .testscss {
    color: pink;
  }
}

混合器（mixin）

混合器使用@mixin标识符定义，重复样式可以用到，如下：

@mixin borderstyle {
  border: 1px solid red;
  font-size: 16px;
  font-weight: bold;
}
.testBox {
  @include borderstyle;
}

编译后：

.testBox {
  border: 1px solid red;
  font-size: 16px;
  font-weight: bold;
}

调用混合器要用@include调用

混合器传参：

@mixin hoverlink($color1, $color2) {
  color: $color1;
  &:hover {
    color: $color2;
  }
}
a{
  @include hoverlink($color1:pink, $color2:red);
}

选择器继承

.jc{
  font-size: 24px;
  color: black;
  div {
    font-size: 16px;
    color: red;
  }
  a {
    color: gold;
    &:hover {
      color: red;
    }
  }
}
.outClass{
  @extend .jc;
}

.outClass继承.jc的所有样式，包括jc里面的所有子样式

编译后：

.outClass{
  font-size: 24px;
  color: black;
}

.outClass div{
    font-size: 16px;
    color: red;
}
.outClass a {
  color: gold;
}
.outClass a:hover {
 color: red;
}

使用继承的好处：

1. 跟混合器相比，继承生成的代码相对更少，继承仅仅只是重复选择器，而不会重复属性
2. 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出