less继承

最新推荐文章于 2024-08-25 20:32:05 发布

&XYZ&

最新推荐文章于 2024-08-25 20:32:05 发布

阅读量361

点赞数

分类专栏： less

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/99695471

版权

less 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

性能比混合高，灵活度比混合低。

加all继承所有的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less继承</title>
    <link rel="stylesheet" type="text/css" href="css/inherit.css">
</head>
<body>
<div class="test">
    <span class="test1">1</span>
    <span class="test2">2</span>
</div>
</body>
<script type="text/javascript" src="../less.min.js"></script>
</html>

.inherit {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.inherit:hover{
  background-color:yellow;
}

.test {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;

  .test1:extend(.inherit all) {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
  }

  .test2:extend(.inherit all) {
    width: 50px;
    height: 50px;
    border: 1px solid yellow;
  }

}

.inherit,
.test .test1,
.test .test2 {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.inherit:hover,
.test .test1:hover,
.test .test2:hover {
  background-color: yellow;
}
.test {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.test .test1 {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}
.test .test2 {
  width: 50px;
  height: 50px;
  border: 1px solid yellow;
}