Question

我似乎无法找到关于可能性（或者甚至可能）执行以下操作的任何文档。

以下是基本的CSS / SASS命名空间声明：

.example {
  border: {
    style: dashed;
    width: 30px;
    color: blue;
  }
}

是否仍然可以使用此格式，但链接top, right, bottom, left声明？

我如何想象写这个：

.example {
  border: {
    top, right, bottom, left: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

.example {
  border: {
    [top, right, bottom, left]: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

Answer 1

有可能（抱歉我之前的错误答案）。这个例子似乎与所有版本的SASS完美配合：

.example {
  border: {
    top: {
      style: dashed;
      width: 30px;
      color: blue;
    }
    left: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

检查SassMeister上的示例。

Answer 2

你需要在border：{}之后逐个添加它们，如下所示：

.example{
      border:{
          style: dashed;
          width:10px;
         color: blue;
      }
     border-top:{
         width:3px;
       }
    border-left:{
      color:red;
     }
   border-right:{
      width:25px;
     }
     padding:70px;
  }

使用SASS的多个嵌套CSS名称空间？

2 个答案: