<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="Nesting.css" />
</head>
<body>
<header class="header">
<div class="logo"></div>
<nav class="nav">
<a href="" class="nav__item">课程</a>
<a href="" class="nav__item">职业路径</a>
<a href="" class="nav__item">实战</a>
<a href="" class="nav__item">猿问</a>
<a href="" class="nav__item">手记</a>
</nav>
</header>
</body>
</html>
Less:
body {
padding: 0;
margin: 0;
}
@header-height: 60px;
@banner-height: 560px;
@courses-height: 200px;
@footer-height: 286px;
@header-bottom-bgcolor: #000;
//嵌套
.header {
height: @header-height;
background-color: @header-bottom-bgcolor;
.logo {
.fl();
}
.nav {
.fl();
.nav__item {
#color(white);
// & --当前所在css模块所有的前缀
&:hover{
.bg-hover()
}
}
}
}
//加上括号,编译时当做被调用处理,不会直接在css中输出
.fl() {
float: left;
}
.fr() {
float: right;
}
@bg-link-hover: #363c41;
.bg-hover() {
background-color: @bg-link-hover;
}
CSS:
body {
padding: 0;
margin: 0;
}
.header {
height: 60px;
background-color: #000000;
}
.header .logo {
float: left;
}
.header .nav {
float: left;
}
.header .nav .nav__item {
color: #fbfbfb;
}
.header .nav .nav__item:hover {
background-color: #363c41;
}
tips:
less中的嵌套一共有2种情况:空格选取的子元素和&引用,空格选取的子元素:使用选择器中嵌套选择器的方式(选择器要全名) ;&引用:&与上级选择器(与全名相比)不相同的字符段拼接即可