4-6 [Sass]嵌套-属性嵌套
本节编程练习不计算学习进度,请电脑登录imooc.com操作

[Sass]嵌套-属性嵌套

Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了:

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写:

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

任务

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

.box {
     font-size: 12px;
     font-weight: bold;
}
  1. .box {
  2. ?: {
  3. ?: 12px;
  4. ?: bold;
  5. }
  6. }
下一节