文档章节

Less 延伸

凌兮洛
 凌兮洛
发布于 10/14 13:53
字数 1574
阅读 13
收藏 0

extend 是一个 Less 伪类,它通过使用 :extend 选择器在一个选择器中扩展其他选择器样式。

扩展语法

扩展可以是附加到选择器,也可以是集中放置在规则,看上去像是带有选择器参数的可选伪类,然后紧跟关键字 all

    // 第一个块和第二个块做同样的事
    .x:extend(.y) {}
    .x{ &:extend(.y);}
    
    // 扩展 .y 元素选择器的所有实例
    .x:extend(.y all){}
    
    // 仅扩展选择器输出为 .y 的实例
    .x:extend(.y){}

扩展附加到选择器

附加到选择器的扩展在我们看来像是一个普通的伪类,带有选择器作为参数,一个选择器可以包含多个extend子句,但是所有扩展都必须在选择器的末尾。

  • 在选择器之后扩展:pre:hover:extend(div pre)
  • 选择器和扩展之间允许有空格:pre:hover :extend(div pre)
  • 允许多个扩展:pre:hover:extend(div pre):extend(.bucket tr)
  • 不允许的:pre:hover:extend(div pre).nth-child(odd),扩展必须是最后一个。

如果规则集中包含多个选择器,那么它们中的任何一个都可以是具有extend关键字的,在一个规则集中扩展的多个选择器。

    .xkd_first,
    .xkd_second:extend(.vue),
    .xkd_three:extend(.python){
        // 内容代码
    }

扩展内侧规则

语法使用:&:extend(selector),将扩展放置到主体中是将它放入这个规则集的每个选择器的快捷方式。

    // 在体内延伸
    pre:hover,.xkd_extend{
        &:extend(div pre);
    }
    
    // 与在每个选择器之后添加扩展名完全相同
    pre:hover:extend(div pre){
        .xkd_extend:extend(div pre){}
    }

扩展嵌套选择器

扩展能够匹配的嵌套的选择器,减少以下内容。

    // 带目标选择器的嵌套规则集
    .xkd{
        tr{
            background:green;
        	font-size:30px;
        }
    }
    .xkd_extend:extend(.xkd tr){}
    
    // 输出
    .xkd tr,.xkd_extend{
        background:green;
        font-size:30px;
    }
    // 从本质上讲,扩展将查看已编译的CSS,而不是原始的CSS

精确匹配扩展

默认情况下,extend查找选择器之间的精确匹配。

选择器是否使用前导星是很重要的,不管是第n个表达式有没有相同的含义,它们都需要有相同的形式才能匹配,唯一的例外是属性选择器中的引号,less 知道它们具有相同的含义并与之匹配。

    // .y 选择器与它上面的所有选择器都不匹配
    .x.xkd,
    .xkd.x,
    .xkd > .x{
        font-size:30px;
    }
    .y:extend(.xkd){}
    
    // 选择器 *.class 和 .class 是等效的,但是扩展名与之并不匹配
    *.v3Xkd{
        font-size:30px;
    }
    .v2Xkd:extend(.v3Xkd){}

伪类的顺序很重要,比如选择器:link:hover:visitedlink:visited:hover 两者匹配的元素集是相同的,但是extend将它们视为了不同的元素。

    // link:hover:visited
    link:hover:visited{
        color:green;
    }
    .selector:extend(link:visited:hover){}
    
    // 输出
    link:visited:visited{
        color:green;
    }

第n个表达式

第n个表达形式很重要,n个表达式 1n+3n+3 是等价的,但是extend与它们是不匹配的。

    :nth-child(1n+3){
        font-size:30px;
    }
    .element:extend(:nth-child(n+3)){}
    
    // 输出
    :nth-child(1n+3){
        font-size:30px;
    }

属性选择器中的引用类型是无关紧要的,比如 [title=identifier][title='identifier'][title="identifier"] 这三者,带引号,单引号还是双引号它们都是等效的,也就是说它们输出的值也是一样的。

全部扩展

当在 extend参数中最后被指定all 关键字时,它会告诉 Less 将这个选择器作为另一个选择器的一部分进行匹配,选择器将会被赋值,然后仅将选择器的匹配部分替换为扩展名,从而建立一个新的选择器。

    .x.y.z,
    .z.xkd {
      color: red;
    }
    .z {
      &:hover {
        color: green;
      }
    }
    .all:extend(.z all) {}
    
    // 输出
    .x.y.z,
    .z.xkd,
    .x.y.all,
    .all.xkd {
      color: red;
    }
    .z:hover,
    .all:hover {
      color: green;
    }

带扩展的选择器插值

extend不能够匹配带有变量的选择器,如果选择器包含变量,它将会把该变量忽略掉;这是一个未定的特性,但是不会轻易改变,但是extend可以连接插入性选择器。

以下是一个示例的对比:

    // 1:包含变量的选择器将不会被匹配:
    @var: .xkd_v3;
    //插入性选择器
    @{var}{  
        color: green;
    }
    //不做任何事
    .xkd_v2:extend(.xkd_v3){}
    
    // 2:在目标选择器进行extend中使用变量将不会被匹配
    .xkd_v3{
        color: green;
    }
    // 匹配不到选择器
    .xkd_v2:extend(@{var}){}
    @var: .xkd_v3;

上面的Less代码都将被编译为:

    .xkd_v3{
        color: green;
    }

除此之外,:extend可以连接到插入性选择器,也就是说上面代码中的 .xkd_v3 选择器可以包含变量,但是 .xkd_v2 选择器不能包含变量。

在@media中范围/扩展

在媒体声明内编写的扩展应该只与同一媒体声明内的选择器匹配,也就是说写在一个media声明中的extend只能匹配在同一个media里面的选择器 。

重复检测

现在是没有重复检测的功能,所以在使用extend的时候需要注意不要extend具有相同规则的选择器。

使用情况

  • 典型用例

    经典的用例就是为了避免添加一个基类 。

        .xkd{
            color: green;
            font-size: 30px;
        }
        .xkd_v2{
            .xkd;
        }
        .xkd_v3{
            .xkd;
        }
    
        编译为:
        .xkd,
        .xkd_v2,
        .xkd_v3{
            color: green;
            font-size: 30px;
        }
    
  • 减小css大小

    Mixins将所有属性复制到选择器中,这可能导致不必要的重复,因此我们可以使用扩展而不是混合来将选择器上移到我们要使用的属性,从而减少生成的CSS。

      .mine{
          color: #fff;
          font-size: 16px;
      }
      .test1{
          &:extend(.mine);
      }
      .test2{
          &:extend(.mine);
      }
    
      编译为:
      .mine,
      .test1,
      .test2{
          color: #fff;
          font-size: 16px;
      }
    
  • 组合样式/更高级的混合

    另一种使用情况是作为mixin的一种替代方法,因为mixin只能用在建档的选择器,如果在HTML中有两个不同的块(block),但是需要应用同一个样式,那么这时候我们就可以使用extend去链接两个块元素。

      li.list >a{ ... }
      button.list-style{
          &:extend(li.list>a);
      }
    

© 著作权归作者所有

上一篇: Less 混入
下一篇: Less 变量
凌兮洛
粉丝 2
博文 82
码字总数 81763
作品 0
长沙
私信 提问
九宫格绘画工具--Draw 9-patch tool

Draw 9-patch tool 是 Android SDK 中附带的工具,可以让你很容易的通过一个所见即所得(WYS|WYG)的编辑器来创建一个九宫格NinePatch图。 下面是一个便捷指南。你需要PNG图像来创建一个九宫...

匿名
2011/09/08
11.2K
0
WSFC2016 延伸群集

延伸群集是Windows Server 2016存储复制的主要应用场景,通过把存储复制与WSFC的结合,实现跨站点群集存储的复制,帮助企业更好的实现较低RTO RPO的跨站点灾难恢复,确保当站点发生故障转移时...

老收藏家
2017/12/12
0
0
ECharts 柱状图 Y轴 倒置,但是柱 从上往下延伸了,想让柱从下往上延伸,详见图

@Kener-林峰 你好,想跟你请教个问题: Y轴 倒置,想让 柱 从下往上延伸,而不是现在这样从上往下延伸、谢谢各位大神。

浪子之亡命天涯
2015/12/08
3.7K
3
透视学的应用(九)

每当我们仰视的时候,视平线就会上升,与地面垂直的建筑轮廓就会向上靠近,最终交于天上的一点,称为天点;而当我们站在高楼往下看的时候,视平线就会降低,与地面垂直的建筑轮廓线就会乡下聚...

博为峰教研组
2016/12/28
0
0
edgesForExtendedLayout、automaticallyAdjustsScrollV

在IOS7以后 ViewController 开始使用全屏布局的,而且是默认的行为通常涉及到布局 就离不开这个属性 edgesForExtendedLayout,它是一个类型为UIExtendedEdge的属性, 指定边缘要延伸的方向,...

Daniel_s
2015/12/22
78
0

没有更多内容

加载失败,请刷新页面

加载更多

荣耀笔记本装Win10系统攻略,一文教你快速入门

     荣耀MagicBook科技尝鲜版发布已经有一段时间了,这个预装了Linux版本的笔记本在原来已经极具性价比的基础上又便宜了300元,而荣耀笔记本如何安装Win10系统俨然成为了热门话题。对于...

梅丽莎好
12分钟前
4
0
CentOS7 部署 redis 5.0.6 集群

环境 操作系统: CentOS7.7,关闭 firewalld 和 selinux Redis: 5.0.6 master 实例 10.0.4.110:6371 10.0.4.110:6372 10.0.4.110:6373 slave 实例 10.0.4.111:6371 10.0.4.111:6372 10.0.4.1......

俊赛潘安-才比管乐
46分钟前
28
0
怎么录制电脑上视频素材的声音

随着短视频的不断发展人们越来越喜欢利用空闲时间观看一些短视频用以打发零碎的时间,不少人发现这个机遇也匆匆走上制作短视频的道路,在制作短视频时配音是至关重要的,那你知道怎么在视频素...

cenfeng123
54分钟前
6
0
[springboot 开发单体web shop] 6. 商品分类和轮播广告展示

商品分类&轮播广告 因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦。 上节 我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能。 商品分类|Produc...

IsaacZhang
54分钟前
5
0
java 静态代码块,代码块,构造方法执行顺序

回顾一下java的执行顺序 public class Demo { public Demo() { super(); System.out.println("this is Demo"); } static { System.out.println("this is static"); } { System.out.println("......

漫步行者
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部