scss-嵌套属性

  使用scss不但可以实现选择器的嵌套,属性也可以进行嵌套。

  首先看一段代码实例:

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

  在scss看来,上面的代码也是可以进行简化的,代码如下:

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

  规则如下:

  (1)把属性名从中划线-的地方断开。

  (2)在根属性后边添加一个冒号:紧跟一个块,把子属性部分写在这个{ }块中。

  再来看一段代码实例:

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

  上面的css代码可以使用scss改造如下:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
原文地址:https://www.cnblogs.com/ibabyli/p/9850531.html