less语法--嵌套

责编:menVScode 2018-03-11 18:56 阅读(491)

less语法--嵌套:可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加清晰。

例子:导航布局样式

【1】普通css写法

nav{
    min-width: 1200px;
    height: 50px;
    background: #000;
}
nav .content{
    width: 1200px;
    margin: auto;
}
nav .content .left{
    float: left;
}
nav .content .right{
    float: right;
}
.content  a{
    color: #fff;
}

【2】less嵌套写法

nav{
    min-width: 1200px;
    height: 50px;
    background: #000;
    .content{
        width: 1200px;
        margin: auto;
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        a{
            color: #fff;
        }
    }
}

less编译后的结果

nav {
  min-width: 1200px;
  height: 50px;
  background: #000;
}
nav .content {
  width: 1200px;
  margin: auto;
}
nav .content .left {
  float: left;
}
nav .content .right {
  float: right;
}
nav .content a {
  color: #fff;
}


& 符号:如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus。

【1】代码示例

/* less语法 */
nav{
    a{
        color: #333;
        &:hover{
            color:red;
        }
    }
}

/* 编译后的css */
nav a {
  color: #333;
}
nav a:hover {
  color: red;
}

【2】代码示例

/* less语法 */.navBox{
    &.contBox{
        background: #abcdef;
    }
    .slider{
        border: 1px solid red;
    }
}

/* 编译后的css */.navBox.contBox {
  background: #abcdef;
}
.navBox .slider {
  border: 1px solid red;
}
标签: less
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码