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

个人博客：haichenyi.com。感谢关注

1. 目录

• 1–目录
• 2–属性继承
• 3–预处理器

2. 属性继承

  像Android里面继承extends，类继承，子类可以使用父类的public和protected的属性和方法。子类可以直接用。
  在CSS里面也是类似的。CSS里面是布局里面的东西继承。举个栗子：

    
    
    
    




    

        

            这是子div标签
        
        
这是子p标签
    

  看上面这个图，我给parent的样式class设置了字体和颜色，为什么内部子view的字体和颜色也发生了改变呢？我明明没有给内部子view设置样式。
  这就是继承，子view的部分属性可以从父view继承过来，不需要单独再去设置。那么，哪些属性可以继承，哪些属性不能继承呢？
  回忆一下，项目里面，给父view设置的属性，子view不需要设置，也会有相同的属性的。这些属性就是可以被继承的。比方说(说不全，只能说常用的)：

1. 字体系列的属性:font-size，font-style，font-weight等等
2. 文本系列的属性:color，text-align，text-transform等等
3. 其他属性:visibility，
     不可继承的属性：
4. 布局相关属性:display，float，box-sizing，left，top，right，bottom，position，z-index等等
5. 尺寸相关属性:width，height，以及他们的min和max
6. 边框相关属性:所有border属性，background属性等等
7. 其他属性: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，他们样式都不一样。

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