Less学习（四）----扩展（Extend）

扩展(Extend)

选择器:extend(选择器参数){ }
扩展是less里的伪类,作用是将选择器与匹配它引用的选择器合并在一起
简单地说，就是在extend里选择器参数出现的设置规则的时候,也会给extend前的选择器给予同样的规则,相当于非破坏性的搜索和替换（）
.a:extend(.b){ } .b{ 样式规则 } 等价于 .b, .a{ 样式规则 }
在输出之前会移除扩展,选择器块仍然保持不变,当没有向扩展里放属性时,在输出的时候会移除扩展,不过仍然可能对其他选择器有影响(不太清楚有啥影响))
1)语法
extend可以绑定在选择器上也可以放在规则设置里,在选择器参数后可以添加关键字 all,添加了 all 后,只要有选择器参数出现的地方都会产生扩展, 没有关键字 all 时,只有选择器参数单独出现的时候才会产生扩展
有多个选择器参数时可以使用 ‘,’ 隔开,和写多个扩展是一样的
.a:extend(.b){ } 等价于 .a{ &:extend(.b); }
.a:extend(.b),.c:extend(.d){} 等价于 .a:extend(.b){} .c:extend(.d){}
(1) 没有关键字all
.a:extend(.b){ } .b.c{ 样式规则//此时的样式是不会渲染到 .a.c ,只会渲染 .b.c }
(2)关键字 all
.a:extend(.b all){ } .b.c{ 样式规则//此时的样式是能够渲染到 .a.c } 相当于 .b.c, .a.c{ 样式规则 }
2)绑定在选择器上
一个选择器上可以绑定多个伪类,但是扩展必须在最后,多个选择器里部分选择器绑定扩展和单独绑定扩展是一样的

Extend after the selector: pre:hover:extend(div pre).
1.extend放在选择器后面
Space between selector and extend is allowed: pre:hover :extend(div pre).
2.选择器和 extend 中间可以有空格
Multiple extends are allowed: pre:hover:extend(div pre):extend(.bucket tr) - Note this is the same as pre:hover:extend(div pre, .bucket tr)
3.可以绑定多个 extend ,它和绑定一个 extend 里面出现多个选择器参数是一样的
This is NOT allowed: pre:hover:extend(div pre).nth-child(odd). Extend must be last.
4.extend 必须在最后

3)绑定在嵌套里
绑定时将选择器参数设置为所需要的嵌套里的选择器即可
4)扩展是精确匹配
*.class 和 .class 在 extend 里是不一样的
伪类是没有顺序的,但是在扩展里伪类的顺序是有影响的,伪类顺序不同匹配的也不一样
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {}
Outputs
link:hover:visited {
color: blue;
}
5)当扩展的参数选择器是变量时,什么也匹配不到,但是选择器是变量时可以匹配到
== emmmmmmmmm 还存在问题==
6)定义在 media 里的范围/扩展
1.定义在media 标签的扩展,只有同样的 media 才会生效

@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector { // this will be matched - it is in the same media
color: black;
}
}
.selector { // ruleset on top of style sheet - extend ignores it
color: red;
}
@media screen {
.selector { // ruleset inside another media - extend ignores it
color: blue;
}
}
compiles into:
@media print {
.selector,
.screenClass { /* ruleset inside the same media was extended /
color: black;
}
}
.selector { / ruleset on top of style sheet was ignored /
color: red;
}
@media screen {
.selector { / ruleset inside another media was ignored */
color: blue;
}
}

2.嵌套的media 标签的扩展,不会生效(不会匹配)

@media screen {
.screenClass:extend(.selector) {} // extend inside media
@media (min-width: 1023px) {
.selector { // ruleset inside nested media - extend ignores it
color: blue;
}
}
}
compiles into
@media screen and (min-width: 1023px) {
.selector { /* ruleset inside another nested media was ignored */
color: blue;
}
}

3.顶级扩展匹配一切,即使是嵌套的 media 标签扩展
我的理解就是把扩展放在 media 标签的外面

@media screen {
.selector { /* ruleset inside nested media - top level extend works /
color: blue;
}
@media (min-width: 1023px) {
.selector { / ruleset inside nested media - top level extend works /
color: blue;
}
}
}
.topLevel:extend(.selector) {} / top level extend matches everything /
compiles into:
@media screen {
.selector,
.topLevel { / ruleset inside media was extended /
color: blue;
}
}
@media screen and (min-width: 1023px) {
.selector,
.topLevel { / ruleset inside nested media was extended */
color: blue;
}
}

4.摹本识别(Duplication Detection),可能是这样叫吧,有道翻译的可能不太准确
扩展里有多个参数选择器时,在匹配时这些参数选择器都会被替换成选择器
.a, .b{
样式规则
}
.c:extend(.a, .b){}
编译成
.a, .b, .c, .c{}

.alert-info,
.widget {
/* declarations /
}
.alert:extend(.alert-info, .widget) {}
Outputs
.alert-info,
.widget,
.alert,
.alert {
/ declarations */
}

7)减少 css 代码
使用混合时会把所有的属性都拷贝一份,会导致重复的代码
而扩展可以引入你想要的属性即可,会减少重复代码的产生
.a{
.a 的样式规则
}
使用混合时
.b{
.a
}
.a{
.a 的样式规则
}
.b{
.a的样式规则
}
使用扩展时
.b :extend (.a){}
.a,.b{
.a 的样式规则
}

<template><div class="lessextend"><div class="container content"><div class="content nokeyall">nokeyall</div><div class="keyallwrapper keyy"><div class="havekeyall">havekeyall</div></div></div><div class="wrapper">wrapper</div><div class="exact box">box</div><div class="chest">chest</div><div class="bin">bin</div><div class="nestextend">nestextend</div><div class="varwrapper">varwrapper<div class="varextend">varexyend</div></div></div>
</template>
<script>
export default {data(){return{}}
}
</script>
<style lang="less" scoped>@import './lessextend';
</style>

@width: 200px;
// extend语法
// .content 里设置的样式规则也会应用到 .container 上, 前提是 只有设置 .content 的样式时
.container:extend(.nokeyall){color: red;width: @width - 100px;height: @width;padding: 30px;margin: 0 auto;
}
// 因为 .container 扩展了 .nokeyall 的样式,因此 .container 上也会有边框,还会有下边距
.nokeyall{border: 2px solid hotpink;margin-bottom: 10px;
}// complies to
// .container{
//   color: red;
//   width: @width - 100px;
//   height: @width;
// }
// .nokeyall , .container{
//   border: 2px solid hotpink;
// }// 不会匹配 .cotent.container ,因为没有关键字 all
.content.nokeyall{background-color: lightblue;
}
// 关键字 all
.keyallwrapper:extend(.havekeyall all){}// .havekeyall{
// }
// 能够匹配到 .keyallwrapper.keyy
.havekeyall.keyy{border-top: 2px solid saddlebrown;
}// 多个选择器部分绑定扩展时和单个绑定是一样的
.wrapper,
.box:extend(.setcolor),
.chest:extend(.setback)
{margin-top: 20px;
}.setback{background-color: aqua;
}// 与上面写在一起的是一样的效果
// .wrapper{
//   margin-top: 20px;
// }
// .box:extend(.setcolor){
//   margin-top: 20px;
// }
// .chest:extend(.setback){
//   margin-top: 20px;
// }// 嵌套里的扩展
.lessextend{.bin{border:3px dotted darkblue;margin-top: 10px;}.exact.box{background-color: chocolate;}*.box{border-bottom: 2px solid black;}
}
.nestextend:extend(.lessextend .bin){}
// 不会把 box上的背景色  box的下边框 渲染到 .nestextend 上
// 扩展是精确匹配,因此匹配不到 .lessextend .box
.nestextend:extend(.lessextend .box){}
问题开始
// 选择器的参数是变量时
// 报错：Variable @varextend is undefined
// @varclass: varextend;
// .varwrapper:extend(.@{varextend}){// }
// .varextend{
//   border: 1px solid grey;
// }
// 选择器是变量时按官方文档说是可以的,但是 border 没渲染到 .varwrapper
@varclass: varwrapper;
@{varclass}:extend(.varextend){}
.varextend{border: 2px solid blueviolet;
}
// .@{varclass}{
//   border: 2px solid blueviolet;
// }// 官方文档的写法 把选择器直接给了变量
// @variable: .bucket;
// .bucket {
//   color: blue;
// }
// @{variable}:extend(.bucket) {}
// @variable: .selector;// previous less compiles into:// .bucket, .selector {
//   color: blue;
// }
//问题结束///// 重复定义时,哪个是最后定义的使用哪个
.varwrapper:extend(.setcolor){color: red;
}
.setcolor{color: green;
}

Less学习（四）----扩展（Extend）相关推荐

控制算法学习四、扩展卡尔曼滤波EKF
控制算法学习四.扩展卡尔曼滤波EKF 前言非线性系统状态/观测方程线性化扩展卡尔曼滤波EKF 后记前言经典卡尔曼滤波的使用场景是线性系统,但现实应用时,大多数系统都是非线性的.扩展卡尔曼滤 ...
python学习四(处理数据)
python学习四(处理数据) head first python中的一个数据处理的例子有四个U10选手的600米成绩,请取出每个选手跑的最快的3个时间.以下是四位选手的9次成绩 James 2-3 ...
Java多线程学习详细学习及扩展
Java多线程详细学习及扩展学习视频:b站狂神–多线程篇一.概述 1.1.名词解释程序(application):程序是指令和数据的有序集合,其本身没有任何的运行的含义,是一个静态的概念. 进程 ...
第四扩展fs_四个fs
第四扩展fs I teach a 3rd year undergraduate course on data science. It is not your typical course of lec ...
Spring 学习之扩展点总结之后置处理器（一）
Spring 源码系列 1.Spring 学习之扩展点总结之后置处理器(一) 2.Spring 学习之扩展点总结之后置处理器(二) 3.Spring 学习之扩展点总结之自定义事件(三) 4.Sprin ...
Linux学习(四)
Linux学习(四) 用户身份与文件权限用户身份与能力 linux系统中的管理员就是root,这是错误的,linux系统的管理员之所以是root,并非是他的名字叫root,而是因为该用户的身份号码即 ...
[Rust学习:四] Vec和栈
[Rust学习:四] Vec和栈一.前言二.阅读Vec源码尝试常用接口. 1. 创建Vec 2. 在尾部添加push\extend\append 3. 任意位置添加insert 4. 在尾部删除p ...
丁晓钟怎么样_六级答案_丁晓钟：如何从各个角度学习四六级阅读理解？_沪江英语...
丁晓钟:全国著名四六级辅导专家,恩波特聘优秀核心教师,六级辅导实力派领军人物,"阅读超精读"和"词汇超链接"学习理念的创始人.全国唯一在同一城市招生超过两千人的 ...
RTKLIB专题学习(四)---单点定位实现初识（二）
RTKLIB专题学习(四)-单点定位实现初识(二) 今天我们来继续学习RTKLIB中单点定位的调用情况,上一篇在这里:RTKLIB专题学习(四)-单点定位实现初识(一) 1.上篇说到了调用procpo ...
DeepLearning | Zero Shot Learning 零样本学习（扩展内容、模型、数据集）
之前写过一篇关于零样本学习的博客,当时写的比较浅.后来导师让我弄个ppt去给本科生做一个关于Zero Shot Learning 的报告,我重新总结了一下,添加了一些新的内容,讲课的效果应该还不错,这 ...

Less学习（四）----扩展（Extend）

扩展(Extend)

Less学习（四）----扩展（Extend）相关推荐

最新文章

热门文章