Sass - 嵌套属性(Nested Properties)

前言

CSS中有一些属性遵循相同的 “命名空间” ，如以下CSS代码的 font 命名空间：

a {
  font-family: '微软雅黑';
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold;
}

其中，font-family、font-size、font-variant、font-weight 都在 font命名空间 中，如果你想在同一个命名空间中设置一串属性(就像上述代码)，你必须每次都输出来，为了解决这一问题，Sass 为此提供了一个解决方案。

嵌套属性

简单来说，你只需要输入一次命名空间，然后在其内部嵌套子属性即可：

a{
    font:{
       family: '微软雅黑';
       size: 14px;
       variant: small-caps;
       weight: bold;     
    }
}

编译为CSS：

a {
  font-family: '微软雅黑';
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold; 
}

可以看到，Sass可以优雅的完成以上问题~

Sass允许命名空间有自己的属性值：

/* 给font命名空间指定一个属性：Error */
a {
   font: Error {
       size: 15px;
       weight:bold;
   } 
}

编译为CSS：

a {
  	font: Error;
    font-size: 15px;
    font-weight: bold; 
}

{ end }