如何在SCSS中使用@if和@extend应用基于选择器的样式规则？

Question

我想根据选择器名称应用文本对齐属性。

如下所示，我尝试使用带有选择器的@if指令(这是四个DOM元素中的两个)，但效果不佳。

所有四个DOM元素的文本都右对齐，因此它们接收@if语句中的第一个代码块。

此代码块嵌套在@extend指令中，该指令依次放入每个选择器的代码块中。

如果使用这种方法不可能做到这一点，那怎么可能呢？

//global.scss

%project-title {
  @media screen and (min-width: 1024px) {
      @if ("#project-1" or "#project-3") {
        text-align: right;
      } @else {
        text-align: left;
      }
   }
}

//_partial-1.scss

#project-1 {
  @extend project-title;
}

//_partial-2.scss

#project-3 {
  @extend project-title;
}

Answer 1

我想像这样的东西应该行得通。请注意，我从来没有使用过SCSS (只有更少)，一些谷歌帮助我写了这篇文章，但请检查语法错误，特别是调用混入部分，我不确定如何在SCSS中调用混入，我必须开始进行更新，当我回来时，如果这是错误的

@mixin project-title( $projectNumber ) {

   @if $projectNumber == '1' or $projectNumber == '3' {

      text-align: right;

   } @else {

      text-align: left;
   }
}

#project-1 {
  @include project-title(1);
}

一个更好的想法是添加一个left/right类，并比较left和right而不是项目编号，这样它就可以用于100个或更多的项目。你会做这样的比较

@if $projectNumber == 'left'

因为如果你有一大堆的项目标题，编号的方式将不会很好地工作