sass嵌套的写法

1. 一般情况的嵌套

sass的嵌套主要解决的就是需要多层来选择的dom元素，不需要重复选择相同的层级

例：

style.scss文件

.nav{
    height: 50px;
    width: 100%;
    ul {
        list-style: none;
        li {
            float: left;
            width: 20px;
            height: 50px;
        }
    }
}

输出之后的style.css文件

.nav {
  height: 50px;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  width: 20px;
  height: 50px;
}

2. 有伪类或者多个选择器选择一个元素的情况

这种情况需要用到&，来表示连接，提示它中间不要加空格

例：
style.scss文件

.nav{
    height: 50px;
    width: 100%;
    ul {
        list-style: none;
        li {
            float: left;
            width: 20px;
            height: 50px;
        }
        a {
            display: block;
            width: 20px;
            height: 50px;
            &:hover {
                color: green;
            }
        }
    }
    &.navbar {
        color: green;
    }
}

编译好的style.css文件

.nav {
  height: 50px;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  width: 20px;
  height: 50px;
}
.nav ul a {
  display: block;
  width: 20px;
  height: 50px;
}
.nav ul a:hover {
  color: green;
}
.nav.navbar {
  color: green;
}

3. 属性的嵌套

重复属性的嵌套
语法：font：{size：。。。； weight：。。。；}

例：
style.scss文件

body {
    font: {
        size: 30px;
        weight: 600;
        style: normal;
    }
}

编译之后的style.css文件

body {
  font-size: 30px;
  font-weight: 600;
  font-style: normal;
}