[Css] 预处理器

这里只列出我个人的需要单独记忆的部分，一些简单的语法我就不赘述了；

1. Scss 定义变量

// 使用 $ 定义变量
$bgColor: pink;

.myBox {
     
  width: 100px;
  height: 100px;
  background-color: $bgColor;
}

2. extends 继承

• 主要用于样式复用，比如一个样式与另一个样式完全相同，但又添加了额外的样式，使用继承可以实现
• 甚至第一个元素样式被第二个元素继承，第三个元素还可以继承第二个；

$bgColor: pink;

.myBox1 {
     
  width: 100px;
  height: 100px;
  background-color: $bgColor;
}

.myBox2 {
     
  // 这里就继承了 .myBox1 中的样式, 还可以添加额外样式
  @extend .myBox1;
  color: red;
}