爱代码的小海的博客

需求背景：<ul class="ul-thead"> <li v-for="(item,index) in historyList" :key="index"> <p >{{item.date}}</p> <p >{{item.airTemp}}</p> <p >{{item.airHum}}</p> <p >{{item.windDir}}</p&g

系列文章目录一：Less学习系列之extend继承二：Less学习系列之Mixins混合三：Less学习系列之匹配模式（Mixins混合的一种形式）文章目录系列文章目录一、问题背景二、代码实现三、使用匹配模式绘制三角形一、问题背景之前开发的时候，经常会用到position定位，然后通过设置top、left、bottom、right来控制元素的位置，但是通常情况下，只需要设置其中的两个值，如果使用默认值+命名参数的形式，那么剩余的值也需要传递，这样就有点麻烦。学习了匹配模式以后，很好的解决了

系列文章目录二：Less学习之extend继承文章目录系列文章目录一、extend的初步理解二、extend的使用形式1. 选择器或样式集中使用2. 继承多个样式类3. 继承目标类的嵌套结构三、extend使用时的注意点一、extend的初步理解extend是less语法的一个伪类 用来继承匹配的样式集A:extend(B)是基本的使用形式，代表将B中的样式集拿到A的样式集中二、extend的使用形式1. 选择器或样式集中使用/*less代码*/.wrap{ color

系列文章目录文章目录系列文章目录一、extend的初步理解二、extend的使用形式一、extend的初步理解extend是less语法的一个伪类 用来继承匹配的样式集二、extend的使用形式/*less代码*/.wrap{ color:red;}/*形式1*/.inner{ &:extend(.wrap); background-color:#f40;}/*编译后的代码*/.wrap,.inner{ color:red;}