【Sass-03】Sass官网文档

关于嵌套

---

1. 嵌套可以帮助像命名空间一样，控制不同页面的css样式。这样就不用绞尽脑汁想不同的名字来区分类了，在嵌套里面可以取一样的名字。
2. 在嵌套里面如果需要用到父元素，可以用&来代替，如：

#main{
    border:1px solid #eee;
    &-sidebar{border:1px solid;}
    a{
        &:hover{color:blue;}
    }
}

#main {
  border: 1px solid #eee; }
  #main-sidebar {
    border: 1px solid; }
  #main a:hover {
    color: blue; }

1. 有些css里面命名有很多重复，使用嵌套可以节省工作量：

.funny{
  font:{
    size: 15px;
    color:#fa5611;
    weight: bold;
  }
}

编译之后

.funny {
  font-size: 15px;
  font-color: #fa5611;
  font-weight: bold; }

注释

---

1. /*这里可以注释长长长*/
2. //这样的注释只是在scss中注释，在生成的css中不会出现

$comments:"haha";
/*#{$comments}.*/

编译后：

/*haha.*/