章节
问答
课签
笔记
评论
占位
占位

[Sass]嵌套-伪类嵌套

其实伪类嵌套属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免选择器嵌套:

  • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
  • 选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。

为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。

任务

在编辑器第2行输入正确的代码,使编译出来的CSS代码如下:

.box:before{
    content:"伪元素嵌套";
}

 

?不会了怎么办

参考代码如下:

.box{
  &:before {
    content:"伪元素嵌套";
  }
}
||
1
2
.box{
? {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_開心偶嘚臫甴_0
因为最终要生成的css文件。sass嵌套多了,css的样式对应嵌套的越深。css嵌套的深让代码阅读麻烦,而且影响性能。

最新回答 / FINE_Android
肯定是不一样的,&表示父元素,编译出来的结果:.clearfix:before,表示.clearfix的伪类before没有加&,编译出来的结果:.clearfix :before,表示的是.clearfix的所有子代元素的伪类before

最新回答 / 菱子ME3580503
nav {  a {    color: red;    header & {      color:green;    }  }  }参见Sass入门篇4-5的例子我的理解是选择器嵌套越多,代码可读性越差。

已采纳回答 / Perona
都不是。连体符&替代元素自身。如:我们要编译如下的css<...code...>那么在Sass中,同样可以使用&来替代选择器.mod:<...code...>需要注意的是&和相连的类名之间不能有任何的空格,不然就会变成CSS选择器中的后代选择器。如这里多了空格<...code...>那么编译出来是css就是<...code...>
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言