Less重点功能-嵌套规则-Nesting

最新推荐文章于 2024-01-16 17:38:46 发布

原创

最新推荐文章于 2024-01-16 17:38:46 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Less #Less重点功能 #Less嵌套 #Less嵌套规则 #Nesting

<!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;
    .lo