如何在SCSS中复用重复的选择器样式代码？

现有如下SCSS代码，其中存在重复的样式定义：

#id1 .class1 {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

// .... other scss settings

.class2 #id2 .class3 {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

希望能通过类似以下伪代码的方式实现样式复用：

$var1: input {
          padding: 4px;
          border: 0px none;
          &:disabled {
            color: red;
          }
        }

#id1 .class1 {
  $var1
}

// .... other scss settings

.class2 #id2 .class3 {
  $var1
}

请问是否可以实现这样的需求？

可以实现，不过SCSS里没法直接把代码块赋值给变量，但可以用混合宏（Mixin）或者占位符选择器来达成你要的复用效果，这两种都是SCSS专门用来解决样式复用的特性：

方法1：使用@mixin和@include #

定义一个混合宏存放需要复用的代码，之后在需要的地方用@include引入即可：

@mixin input-styles {
  input {
    padding: 4px;
    border: 0 none;
    &:disabled {
      color: red;
    }
  }
}

#id1 .class1 {
  @include input-styles;
}

// .... other scss settings

.class2 #id2 .class3 {
  @include input-styles;
}

编译后的CSS和你原本的代码完全一致，完美实现样式复用。如果后续需要调整这段样式，只需要修改混合宏里的内容就行。

方法2：使用占位符选择器（%）和@extend #

如果这段样式不需要传递参数，也可以用占位符选择器配合@extend来复用，这种方式会把相同的样式规则合并，输出更精简的CSS：

%input-styles {
  input {
    padding: 4px;
    border: 0 none;
    &:disabled {
      color: red;
    }
  }
}

#id1 .class1 {
  @extend %input-styles;
}

// .... other scss settings

.class2 #id2 .class3 {
  @extend %input-styles;
}

两种方法都能满足你的需求，其中Mixin更灵活，支持传递参数（比如后续要给不同场景的input设置不同padding值），占位符则更适合纯静态样式的复用。

内容的提问来源于stack exchange，提问作者Greeso