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