sass – 使用@ at-root和&选择器列表

发布时间：2020-12-13 22:59:11 所属栏目：Linux 来源：网络整理

导读：我有一个CSS我尝试移动到SASS有许多结构,如 .btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary {...} 有了这个： .btn-primary { ... :hover,:focus,:active,.active,.open .dropdown-tog

我有一个CSS我尝试移动到SASS有许多结构,如

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary {
...
}

有了这个：

.btn-primary {
    ...
    &:hover,&:focus,&:active,&.active,.open .dropdown-toggle#{&} {

我明显得到：

.btn-primary:hover,.btn-primary .open .dropdown-toggle.btn-primary {
...
}

但我似乎不允许使用@ at-root：

.btn-primary {
    ...
    &:hover,@at-root .open .dropdown-toggle#{&} {

因为SASS需要一个逗号后面的选择器并得到一个@ …

解决方法

@ at-root指令不能以这种方式使用.它旨在应用完整选择器,而不是列表中的单个选择器.由于您的选择器都是类,因此您可以将父选择器重新定位到开头,而不是尝试将其附加到结尾：

.btn-primary {
    &:hover,.open &.dropdown-toggle {
      color: red;
    }
}

输出：

.btn-primary:hover,.open .btn-primary.dropdown-toggle {
  color: red;
}

如果它绝对必须在最后(例如,你正在使用元素或伪选择器),最简单的解决方案是只使用extends：

%common {
    color: red;
}

.btn-primary {
    &:hover,&.active {
        @extend %common;
    }

    @at-root .open .dropdown-toggle#{&} {
        @extend %common;
    }
}

输出：

.btn-primary:hover,.open .dropdown-toggle.btn-primary {
  color: red;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

sass – 使用@ at-root和&amp;选择器列表

解决方法

sass – 使用@ at-root和&选择器列表