学会如何使用LESS（二）----嵌套规则、运算、命名空间和作用域

嵌套

一、嵌套规则

header{
    h1{
        font-size: 18px;
        color: green;
    }
    .box1{
        width: 300px; height: 200px;
        background: red;
    }
}

编译后的css:

header h1 {
  font-size: 18px;
  color: green;
}
header .box1 {
  width: 300px;
  height: 200px;
  background: red;
}

二、父元素选择器（&）
表示当前选择器所有父选择器

footer{
    h1{
        font-size: 20px;
        color: orange;
    }
    .box2{
        width: 500px; height: 100px;
        background: green;
        &:hover{
            background: blue;
        }
    }
}

编译后的css:

footer h1 {
  font-size: 20px;
  color: orange;
}
footer .box2 {
  width: 500px;
  height: 100px;
  background: green;
}
footer .box2:hover {
  background: blue;
}

三、改变选择器的顺序
将&放到当前选择器之后，就会将当前选择器插入到时所有父元素之前。

.father{
    .son{
        .grand &{
            color: red;
        }
    }
}

编译后的css:

.grand .father .son {
  color: red;
}

四、组合生成所有可能的选择器列表

p,a,ul,li,span{
    border: 1px solid red;
    & &{
        border-top: 0;
    }
}

编译后的css:

p,
a,
ul,
li,
span {
  border: 1px solid red;
}
p p,
p a,
p ul,
p li,
p span,
a p,
a a,
a ul,
a li,
a span,
ul p,
ul a,
ul ul,
ul li,
ul span,
li p,
li a,
li ul,
li li,
li span,
span p,
span a,
span ul,
span li,
span span {
  border-top: 0;
}

运算

任何数值、颜色和变量都可以进行运算；
一、数值型运算
less会为你自动推算数值和单位，所以我们不用每个值都加上单位，注意，运算符与值之间必须以空格空开，涉及优先及时以（）进行优先级运算；

.div{
    width: 450 + 450px;
    height: 2 * 30px;
}

.div2{
    width: ( 300px + 200 ) * 2;
}

编译后的css:

.div {
  width: 900px;
  height: 60px;
}
.div2 {
  width: 1000px;
}

二、颜色值运算
less在运算时，先将颜色值转换为rgb模式，然后再转换为16进制的颜色值并返回,rgb模式他的值是 0~255，当你的值超过255则默认使用最大值255进行计算,不能直接使用颜色名称进行运算。

.content{
    width: 300px; height: 200px;
    background: #000000 + 21;
}

编译后的css:

.content {
  width: 300px;
  height: 200px;
  background: #151515;
}

命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。

#bgcolor(){
    background: #ffffff;
    .a{
        color: #8888888;
        &:hover{
            color: #ff6600;
        }
        .b{
            background: #333;
        }
    }

}

.bgcolor1{
    background: #fdfee0;
    #bgcolor>.a;
}

.bgcolor2{
    #bgcolor>.a>.b;
}

//省略>的写法(将>改成空格即可)

编译后的css:

.bgcolor1 {
  background: #fdfee0;
  color: #8888888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor1 .b {
  background: #333;
}
.bgcolor2 {
  background: #333;
}

作用域

Less中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。

@color: orange;

.bgcolor{
    width: 50px;
    a{
        @color: #333;
        color: @color;
    }
    @color: red;
}

编译后的css:

.bgcolor {
  width: 50px;
}
.bgcolor a {
  color: #333333;
}