当前位置：首页 > news >正文

CSS—属性继承与预处理器：2分钟掌握预处理器

news 来源：原创 2025/8/25 21:26:50

个人博客：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循环用起来，你自己当时知道是啥意思，过一段时间，你可能都忘记了。改也不好改。上面那几种用的都比较多。

1. 目录

2. 属性继承

3. 预处理器

变量

嵌套

混合

继承（Extend）

相关文章：