在 SASS 嵌套中使用 ":not" 伪类

Question

我正在尝试将一些纯 CSS 转换为 SCSS，以便我可以利用嵌套。下面的代码是我想为一堆表单字段输入类型定义样式的示例。在下面的纯 CSS 中，我设置了默认值以及字段的 :focus 状态。除了一个特定的表单字段（我的全局标题中的一个搜索字段），我使用的是:not 否定伪类选择器。

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea {
    border: 2px solid #c3cbd6;
}

input.text:focus, 
input.title:focus, 
input[type=email]:focus, 
input[type=password]:focus, 
input[type=tel]:focus, 
input[type=text]:not(div.global-search > form > div > input.et_pb_s):focus, 
select:focus, 
textarea:focus {
    border: 2px solid #008ed4;
}

这是我对第一个块的嵌套 SCSS 的转换：

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea {
    border: 2px solid #c3cbd6;
    
    &:focus {
        border: 2px solid #008ed4;
    }
}

但是第二个 CSS 块转换为 SCSS 比较棘手，因为我使用 :not 选择器来排除搜索字段与所有其他表单一样具有焦点状态。

如何在 SCSS 中做到这一点？

Answer 1

为 input[type=text] 分离 SCSS，并用 :not 选择器编写它

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
select, 
textarea {
    border: 2px solid #c3cbd6;
    
    &:focus {
        border: 2px solid #008ed4;
    }
}

input[type=text] {
 &:not(div.global-search > form > div > input.et_pb_s) {
 &:focus {
        border: 2px solid #008ed4;
 }
}
}