Question

我想根据选择器名称应用text-align属性。

如下所示，我尝试在选择器中使用@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'

因为如果你有一大堆项目标题，那么编号方式就不会很好用了

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

1 个答案: