为 SASS 中的每个规则添加前缀

Question

我的项目使用 vuetify 和很多我自己的样式。 我的样式经常在样式声明中多次使用&，如下所示：

.sis-sidebar {
  &__link {
    &.-active &-placeholder {
      color: #fff;
    }
  }
}

// Compiles to:

.sis-sidebar__link.-active .sis-sidebar__link-placeholder {
  color: #fff;
}

它适用于这样的 html：

<div class="sis-sidebar__link -active">
  <div class="sis-sidebar__link-placeholder">
    This one is white
  </div>
</div>

我希望我的所有样式都比框架中的样式具有更高的优先级。但我不想改变里面的任何东西。这就是我要修改的入口 scss 文件：

@import 'framework';
@import 'my-styles';

我希望我的所有样式都带有一些 #sis 前缀，但只有一次。如果我这样做了

@import 'framework';
#sis {
  @import 'my-styles';
}

// It compiles to:

#sis .is-sidebar__link.-active #sis .is-sidebar__link-placeholder {
  color: #fff;
}

// And I want it to be: 

#sis .is-sidebar__link.-active .is-sidebar__link-placeholder {
  color: #fff;
}

有可能做到吗？

Answer 1

你可以这样做：

.sis-sidebar {
  &__link {
    #sis &.-active &-placeholder {
      color: #fff;
    }
  }
}

您也可以通过使用变量来完全避免这个问题，如下所示：

$sidebar-block: '.sis-sidebar';
$sidebar-element: '__link';

#sis {
  #{$sidebar-block + $sidebar-element}.-active #{$sidebar-block + $sidebar-element}-placeholder {
    color: #fff;
  }
}