Less的基本用法

CSS

Less

1. 变量（Variables）

//less
@nice-blue: #5B83AD;
.container {
  color: @nice-blue;
}

//生成的css
.container {
  color: #5B83AD;
}

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

//less
.bordered {
  border: solid 2px black;
}
.container {
  color: @nice-blue;
.bordered;
}

//生成的css
.container {
  color: @nice-blue;
  border: solid 2px black;
}

在一个选择器中嵌套另一个选择器来实现继承。

//less
.container{
    color: #5B83AD;
    .logo{
        color: red;
    }
}

//生成的css
.container{
    color:#5B83AD;
}
.container .logo{
    color: red;
}

表示当前的选择器，写串联选择器，而不是写后代选择器，就可以用到&了.
这点对伪类尤其有用如:hover 和 :focus.

//less
.container{
    color:#5B83AD;
    &:hover{
        color:red;
    }
}

//生成的css
.container{
    color:#5B83AD;
}
.container:hover{
    color:red;
}

运算提供了加，减，乘，除操作;任何数字、颜色或者变量都可以参与运算.

//less
@the-border: 1px;
@base-color: #666;
.container{
    color: @base-colo * 2;
    solid @the-border * 2 red;
}

//生成的css
.container{
    color: #333;
    border: solid 2px red;
}

在less中 calc(100% - 30px) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，
此例中的计算被less编译成calc(70%)。

1
2
3

.container{
    width: calc(100% - 30px)
}

//less解析成
.container{
    width: calc(70%);
}

less的计算方式跟calc方法有重叠，两者在一起有冲突

把calc()里面的表达式加上~用”“包起来。

1
2
3

.container{
    width : calc(~"100% - 30px");
}

//解析成
.container{
    width :  calc(100% - 30px);
}

进行数值和变量之间的运算可以这样设置：

@var = 50px;
.container{
  width: calc(~"100% - @{var}")
}