SCSS/SASS 与 & 符号的奇怪行为答案

【问题标题】：SCSS/SASS strange behavior with ampersandSCSS/SASS 与 & 符号的奇怪行为
【发布时间】：2016-11-14 12:56:25
【问题描述】：

我在使用 SASS 时尝试在父级之后使用与号，以便在父级的类发生更改时修改元素的行为。

我的 scss 看起来像这样：

#filter {
    width: 100%;
    height: 68px;
    position: absolute;
    top: 0;
    left: 0;
    transform:translate3d(100%, 0, 0);
    @extend .bg-color--blue;
    @extend .animate;

    &.open {
        transform:translate3d(0, 0, 0);
    }

    .filter {
        width:100%;
        height:100%;

        &__container {
            display:none;
        }

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;

            #filter.open & {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }
}

我正在查看的主线位于层次结构的末尾。 #filter.open & {

目前正在输出：

#filter.open #filter .filter__pull {
    color: red; 
}

我需要它输出的是这样的：

#filter.open .filter__pull {
    color: red;
}

我不确定为什么要在其中添加额外的#filter。在我使用它的其他项目中，这不会发生。

有什么想法吗？

【问题讨论】：

尝试将#filter.open & {更改为&#filter.open {
@developernator，这将使它成为#filter .filter__pull#filter.open，这也不正确
似乎 & 一直到你开始的地方......
试试@at-root

标签： sass

【解决方案1】：

这并不理想，但似乎行尾的与号 (&) 会将所有内容一直复制到嵌套 SCSS 的根目录。

我已经从 id #filter 下删除了 .filter 类（我知道这很令人困惑），并将 .filter 设为文件中的基本元素。

这样，当& 复制层次结构时，它不会一直复制到#filter 元素

#filter {
  ...

  &.open {
    ...
  }
}
.filter {
  ...

  &__container {
    ...
  }

  &__pull {
    ...

    #filter.open &  {
      @extend .bg-color--blue-dark;

      i {
        transform: translate3d(-100%, -50%, 0);
        @extend .animate;
      }
    }
  }
}

【讨论】：

【解决方案2】：

#filter {
    width: 100%;
    height: 68px;
    position: absolute;
    top: 0;
    left: 0;
    transform:translate3d(100%, 0, 0);
    @extend .bg-color--blue;
    @extend .animate;

    &.open {
        transform:translate3d(0, 0, 0);
    }

    .filter {
        width:100%;
        height:100%;

        &__container {
            display:none;
        }

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;

            @at-root {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }
}

【讨论】：

会让@at-root 再次查看根源，#filter

【解决方案3】：

在这个阶段，我认为你正在努力减少你正在编写的 SCSS 的数量，而不是真正使它更可读和可管理。为什么不这样做：

#filter {
    ...

    &.open {
        transform:translate3d(0, 0, 0);
        .filter {
            &__pull {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }

    .filter {
        ...

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;
        }
    }
}

这更具可读性，并且您将所有open css 分组到自己的块中，因此如果您想更改类open 的值，例如。到active 什么的，你在一个地方改变它。

【讨论】：