嵌套

62 0

sass最大的也是最常用的功能就是嵌套了。

#nav {
  ul {
    color:red;
  }
}

这种写法可以理解为:

#nav ul {
  color:red;
}

当我们要对#nav下多个元素控制css样式的时候,嵌套就显得非常方便,因为父选择器我们只需要写一次。

虽然说可以无限嵌套下去,但是如果你根据dom树的结构进行嵌套,你会发现维护起来非常麻烦,因为内容一多,你可能都不知道这个class的父级是谁,所以一般来说,sass的嵌套最好保持在四层以内。

嵌套属性

我们写css经常会有很多重复的前缀名,比如说font系列的前缀,background的前缀,前面都是相同的,只有后面部分不同,所以我们可以进行属性的嵌套

font: {
  size:19px;
  weight:bold;
}
background: {
  color:red;
  image:url("xxx.jpg");
}

这种属性嵌套可以转换为:

font-size:19px;
font-weigth:bold;

background-color:red;
background-image:url("xxx.jpg");

这样就可以省去了书写重复的前缀的代码,及其便捷。

0
  • 本文分类:SASS
  • 本文标签:sass嵌套
  • 流行热度:已超过 62 人围观了本文
  • 发布日期:2020年04月20日 - 18时03分49秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码