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

Posted 2023-05-08

【中文标题】在 SASS 嵌套中使用 ":not" 伪类

【英文标题】：Use ":not" pseudoclass within SASS nesting

【发布时间】：2022-01-15 14:57:17

【问题描述】：

我正在尝试将一些纯 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 中做到这一点？

【参考方案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;
 

【讨论】：

谢谢。看起来它应该可以工作，但我收到一个解析错误：在 & 符号上的 &(div.global-search > form > div > input.et_pb_s) 上失败。

@user3169905 对此感到抱歉。我不应该分开 :not 和 (div)，我的错。我已经编辑了我的答案。

感谢您的编辑。这样可行！ :)

别担心，很高兴我能帮上忙 :)