Use Scss to implement css has func（使用scss实现css中has函数）

Use Scss to implement css has func（使用scss实现css中has函数）

has

has in css

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

CSS 函数式伪类 :has() 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

<template>
    <div class="father">
        <div class="son"></div>
    </div>


</template>

<script lang="ts" setup>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// check sass is config success
// 检查scss是否配置成功

// css has function
$bg_color: rgba(0, 0, 0, 1);
$width: 100px;
$height: 200px;
//.container {
//  background-color: $bg_color;
//  width: $width;
//  height: $height;
//}

.father:has(.son) {
  // has role has if father has the son， this css is success
  // has函数的作用是，如果父亲有这个孩子，那么这个样式就会生效。
  background: $bg_color;
  width: $width;
  height: $height;
}


</style>

in chrome

in 360

.father:has(.son) {
  // has role has if father has the son， this css is success
  // has函数的作用是，如果父亲有这个孩子，那么这个样式就会生效。
  background: $bg_color;
  width: $width;
  height: $height;
}

scss

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// check sass is config success
// 检查scss是否配置成功

// css has function
$bg_color: rgba(0, 0, 0, 1);
$width: 100px;
$height: 200px;
//.container {
//  background-color: $bg_color;
//  width: $width;
//  height: $height;
//}

@if '.scss_father .sacc_son' {
  .scss_father {
    width: 200px;
    height: 200px;
    background-color: gray;
  }
}
</style>

in chrome

in 360