前端开发,LESS中的混合和继承有什么区别

发布网友发布时间：2022-04-23 05:30

共2个回答

热心网友时间：2023-10-16 12:17

前端开发用less或者sass的情况如下：项目足够大，起码几十张页面，有公共的UI组件，组件或者页面上有相似的拼装属性的方法(可以写成mixin)，组件或者样式拼装上存在继承关系，或者有theme的需求。其实本身纯粹的CSS编写也有很多现成的方*(OOCSS,SMACSS,BEM,DRYCSS)实现复杂度的管理，但是预编译器可以提供一些语法糖简化(包括你可以使用PostCSS)，同时迁移编程的经验更好管理复杂度。其实就是习惯和效率的问题，工具是为了提高效率存在的，如果不习惯，大家有统一规范的共识，用纯粹CSS也能写出组织良好的CSS。

热心网友时间：2023-10-16 12:17

为什么有了mixin还需要extend呢？二者的不同之处在于编译完成后的css写法不同，extend产生的css更为简洁，相对而言mixin会产生大量重复，extend更有利于缩减css的大小。如：

使用mixin：

.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 { .my-inline-block; }
.thing2 { .my-inline-block; }

Output：

.thing1 {
    display: inline-block;
    font-size: 0;
}
.thing2 {
    display: inline-block;
    font-size: 0;
}

使用extend：

.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 { &:extend(.my-inline-block); }
.thing2 { &:extend(.my-inline-block); }

output：

.my-inline-block, .thing1, .thing2 {
display: inline-block; font-size: 0;
}

一目了然吧。

另外，extend可以看作是mixin的一种更高级的替代方式，原因是mixin只能被用于简单的选择器，而例如这类情况：有两个html代码块，你想在这两个代码块中使用相同的样式，此时就可以使用extend将他们联系起来。