sass嵌套

css预处理器有 sass 、less

sass有两套语法: scss和sass，现在我们通常用sass

style.scss

        .foo{
 color: red;
 font-size: 12px;
}
      

style.sass

        .foo
    color: red
    font-size: 12px
      

安装sass

        npm install -g sass
      

编译sass: 编译后sass转css

        sass ./src/style.scss ./dist/index.css
      

以前的css写法:

        .container {
 max-width: 600px;
 width: 100%;
 margin: auto;
 background: #eee;
}
.container .sidebar,
.container .main {
 padding: 10px;
}
.container .marin {
 margin-left: 220px;
 min-height: 100vh;
 border-left: 2px solid #333;
}
.container .sidebar {
 width: 200px;
 float: left;
}
      

现在的sass嵌套写法:

        .container {
 max-width: 600px;
 width: 100%;
 margin: auto;
 background: #eee;

 .sidebar,
 .main {
 padding: 10px;
    }

 .marin {
 margin-left: 220px;
 min-height: 100vh;
 border-left: 2px solid #333;
    }

 .sidebar {
 width: 200px;
 float: left;
    }
}
      

直接子元素:

        .container {
    >.left-area {
 color: #444;
    }
}
      

等于css:

        .container > .left-area {
 color: #444;
}
      

&父亲选择器:

        .container {
 &.right-nav {
 color: #333;
    }
}

div{
 &.dome{
 color: yellow;
    }
 a{
 color: red;
    }
}
      

等于css:

        .container.right-nav {
 color: #333;
}

div.dome {
 color: yellow;
}
div a {
 color: red;
}