css - 如何在 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(仅使用过 LESS)，稍微谷歌搜索帮助我写了这篇文章，但请检查语法错误，特别是调用 mixin 部分，我不确定 SCSS 中如何调用 mixin，我得开始了如果这是错误的，当我回来时更新

@mixin project-title( $projectNumber ) {

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

      text-align: right;

   } @else {

      text-align: left;
   }
}

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

一个更好的想法是添加一个左/右类并比较左右而不是元素编号，这样它就可以用于 100 个或更多元素。你会像这样比较

@if $projectNumber == 'left'

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