栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

LESS是否具有“扩展”功能?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

LESS是否具有“扩展”功能?

是的,Less.js推出

extend
的V1.4.0。

:extend()

@extend
LESS没有实现SASS和Stylus使用的at-
rule()语法,而是实现了伪类语法,这为LESS的实现提供了灵活性,使其可以直接应用于选择器本身或在语句内部。因此,这两个都将起作用:

.sidenav:extend(.nav) {...}

要么

.sidenav {    &:extend(.nav);    ...}

此外,您还可以使用

all
指令扩展“嵌套”类:

.sidenav:extend(.nav all){};

您可以添加以逗号分隔的要扩展的类列表:

.global-nav {    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);    height: 70px;}

扩展嵌套选择器时,您应该注意到不同之处:

嵌套选择器

.selector1
selector2

.selector1 {  property1: a;   .selector2 {    property2: b;   }}

现在

.selector3:extend(.selector1 .selector2){};
输出:

.selector1 {  property1: a;}.selector1 .selector2,.selector3 {  property2: b;}

.selector3:extend(.selector1 all){};
输出:

.selector1,.selector3 {  property1: a;}.selector1 .selector2,.selector3 .selector2 {  property2: b;}

.selector3:extend(.selector2){};
输出

.selector1 {  property1: a;}.selector1 .selector2 {  property2: b;}

最后

.selector3:extend(.selector2 all){};

.selector1 {  property1: a;}.selector1 .selector2,.selector1 .selector3 {  property2: b;}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465127.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号