CSS—属性继承与预处理器：2分钟掌握预处理器
个人博客：haichenyi.com。感谢关注
1. 目录
- 1–目录
- 2–属性继承
- 3–预处理器
2. 属性继承
像Android里面继承extends，类继承，子类可以使用父类的public和protected的属性和方法。子类可以直接用。
在CSS里面也是类似的。CSS里面是布局里面的东西继承。举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS—属性继承</title>
<style>
.parent {
/* 父div设置字体和颜色 */
font-size: 22px;
color: aqua;
.childDiv {}
.childP {}
}
</style>
</head>
<body>
<div class="parent">
<div class="childDiv">
这是子div标签
</div>
<p class="childP">这是子p标签</p>
</div>
</body>
</html>
看上面这个图，我给parent的样式class设置了字体和颜色，为什么内部子view的字体和颜色也发生了改变呢？我明明没有给内部子view设置样式。
这就是继承，子view的部分属性可以从父view继承过来，不需要单独再去设置。那么，哪些属性可以继承，哪些属性不能继承呢？
回忆一下，项目里面，给父view设置的属性，子view不需要设置，也会有相同的属性的。这些属性就是可以被继承的。比方说(说不全，只能说常用的)：
- 字体系列的属性:font-size，font-style，font-weight等等
- 文本系列的属性:color，text-align，text-transform等等
- 其他属性:visibility，
不可继承的属性： - 布局相关属性:display，float，box-sizing，left，top，right，bottom，position，z-index等等
- 尺寸相关属性:width，height，以及他们的min和max
- 边框相关属性:所有border属性，background属性等等
- 其他属性:margin，padding等等
3. 预处理器
概念： 预处理器是一种在CSS文件生成之前对代码进行预编译的工具，它允许开发者在CSS中使用变量、嵌套规则、函数和模块化等功能。这些功能使得CSS代码更加简洁、模块化和易于维护。
a. 是一种预编译的工具，在css文件生成之前
b. 在开发的时候可以使用变量，嵌套规则，函数等等
c. 使CSS代码更加简洁，模块化，易于维护
**种类：**常用的预处理器scss，Sass，Less，Stylus。我们项目里面使用的是scss，我这里就以scss为例：
变量
比方说，你如果项目里面一个页面，有很多位置使用#666666
.style1{
color: #666666;
....其他属性
}
.style2{
color: #666666;
....其他属性
}
.style3{
color: #666666;
....其他属性
}
....
假如有100个样式，都需要这个颜色，你写100遍。现在需求改了，让你把这个页面的颜色，全部改成红色。你怎么办？你要改100遍吗？1000遍呢？10000遍呢？
在SCSS中，可以使用变量来存储颜色、字体、尺寸等重复使用的值。这样，当需要更改这些值时，只需在变量定义处修改一次，即可影响所有引用该变量的地方。这个时候，你如果使用scss，你可以这样写
$primary-color: #666666;
.style1{
color: $primary-color;
....其他属性
}
.style2{
color: $primary-color;
....其他属性
}
.style3{
color: $primary-color;
....其他属性
}
....
你先定义一个变量$primary-color，用的位置，直接引用这个变量就行了。后续要改动，那就只用改变量的位置改成你想要的颜色就行了。
嵌套
上面这个是变量的例子。下面再说一个嵌套规则的例子：一个页面有两个子view，两个子view又分别有各自的子孙view，他们样式都不一样。
<div class="A">
<div class="a1">
<div class="a4"></div>
</div>
<div class="a2">
<div class="a5"></div>
</div>
<div class="a3">
<div class="a6"></div>
</div>
</div>
<div class="B">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
上面这个布局。如果是按照CSS去写样式所有的样式都要平铺开，压根就不知道谁是谁，如果不看布局的话
.A{
...
}
.a1{
...
}
.a2{
...
}
...
.B{
...
}
.b1{
...
}
SCSS允许在一个选择器内部嵌套另一个选择器，以表示它们之间的层级关系。这使得代码更加直观和易于维护。如果使用scss去写样式：
.A{
.a1{
.a4{
}
}
.a2{
.a5{
}
}
.a3{
.a6{
}
}
}
.B{
.b1{
}
.b2{
}
.b3{
}
}
看到了吧？他们的样式放的位置都有一定的规律，A,B他俩是平级的，a1,a2,a3是平级的，他们属于A样式所在的元素的子元素的样式。a4又是a1的子样式。就是一层一层的嵌套。这样看就一目了然。改也方便。
混合
我就不举老写法的例子了。Mixins允许你定义可重用的代码块，类似于函数。它们可以包含一组CSS属性和规则，并通过@include指令在其他选择器中复用。
@mixin border-radius($radius) {
border-radius: $radius;
}
.button {
@include border-radius(5px);
background-color: $primary-color;
color: white;
padding: 10px 20px;
}
继承（Extend）
使用@extend指令可以让一个选择器继承另一个选择器的样式。这有助于减少重复代码，并使样式表更加简洁。
.base-button {
padding: 8px 16px;
border: none;
cursor: pointer;
}
.primary-button {
@extend .base-button;
background-color: $primary-color;
color: white;
}
.secondary-button {
@extend .base-button;
background-color: #6c757d;
color: white;
}
还有for循环，我没有写，我感觉我们之所以用这个，就是为了简单，方便维护。我感觉for循环用起来，你自己当时知道是啥意思，过一段时间，你可能都忘记了。改也不好改。上面那几种用的都比较多。