LESS详解之嵌套(&)

　　LESS是一种动态语言，属于CSS预处理语言的一种。LESS和其他预处理语言一样也支持嵌套的写法。下面就为大家通过小例子来介绍LESS中的嵌套书写方式。

　　嵌套语法

　　LESS代码

.meng { color: red;
    .long { font:bold 12px/20px "宋体"; }
    a { color:#000;
	span {padding: 10px;}
	i {width:10px;
		em {
			height : 90px;
		}
	}	
    }
}

　　编译后的CSS代码

.meng {
  color: red;
}
.meng .long {
  font: bold 12px/20px "宋体";
}
.meng a {
  color: #000;
}
.meng a span {
  padding: 10px;
}
.meng a i {
  width: 10px;
}
.meng a i em {
  height: 90px;
}

　　&的用法

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

　　LESS代码

.meng { color: red;
    .long { font:bold 12px/20px "宋体"; }
    a { color:#000;
        &:hover {
            text-decoration:none;
        }    
        &:focus {
            color:#999;
        }
    }
    .menglong {background:red;
        &:hover {
            background:#777;
        }
    }
}

　　编译后的CSS代码

.meng {
  color: red;
}
.meng .long {
  font: bold 12px/20px "宋体";
}
.meng a {
  color: #000;
}
.meng a:hover {
  text-decoration: none;
}
.meng a:focus {
  color: #999;
}
.meng .menglong {
  background: red;
}
.meng .menglong:hover {
  background: #777;
}

　　&的高级用法

　　用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。

　　LESS代码

.meng, .long {
    div & {
        color: black;
    }
    & + & {
        color: red;
    }
    & ~ & {
        color: red;
    }
}

　　编译后的CSS代码

div .meng,
div .long {
  color: black;
}
.meng + .meng,
.meng + .long,
.long + .meng,
.long + .long {
  color: red;
}
.meng ~ .meng,
.meng ~ .long,
.long ~ .meng,
.long ~ .long {
  color: red;
}

　　LESS详解之嵌套就为大家讲到这里了，更多有关LESS的小知识敬请关注梦龙小站有关LESS的更新。感谢大家一直以来对梦龙小站的关注。