less中的层级结构

原创

程序员NEO

发布于 2023-09-29 07:28:01

2630

基于 less 初体验这篇文章，在该文章当中其实已经出现了 less 中的层级结构，我将该代码贴在了下方

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less中的层级结构</title>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

index.less

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

通过如上的写法可以看出 css 的层级结构和 html 的结构已经是一模一样了，这样也方便了我们进行阅读和维护了，但是如上的内容并不是我们这次的重点内容，这次我要介绍的内容为，在这种层级结构当中为何使用伪类和伪元素，什么是伪类和伪元素呢，先来看一个小小的需求案例，我现在要求 .son 鼠标移上去 (hover) 改变该元素的背景颜色，在过去我们如何实现这个需求的，代码如下

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.son:hover {
  background: green;
}

如果按照如上的写法进行编写，就违背了 less 的初衷，less 的初衷就是一个整体的内容都需要放到一个整体当中，当前 hover 代码并没有放到一个整体当中

先来看如果在某一个选择器的 {} 中直接写上了其它的选择器，会自动转换成后代选择器

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

改造如上 hover 的代码

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .son {
    :hover {
      background: green;
    }

    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

经过改造后的代码发现，:hover 也使用后代来转换了，使用 & 改造如上 hover 代码，& 的作用，是告诉 less 在转换的时候不用用后代来转换，直接拼接在当前选择器的后面即可

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .son {
    &:hover {
      background: green;
    }

    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

如上是关于伪类的添加，在来看看关于伪元素的添加，如下

* {
  margin: 0;
  padding: 0;
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  &::before {
    content: "子元素";
    display: block;
    background: yellowgreen;
    width: 100px;
    height: 100px;
  }
}