如何将 2 个 SCSS 规则之间的共同点保留为单个规则并创建一个具有差异的新规则答案

【问题标题】：How to keep the common thing between 2 SCSS rules into a single rule and create a new one with the difference如何将 2 个 SCSS 规则之间的共同点保留为单个规则并创建一个具有差异的新规则
【发布时间】：2020-12-12 23:59:40
【问题描述】：

我有两个 div，里面有很多输入。

其中一个仅使用PrelimsSpecificsSegButtons，另一个使用SliderAcuityAnyButtons 作为外观类

这些类之间的唯一区别是

SliderAcuityAnyButtons 使用 &:nth-child(6n+18)
PrelimsSpecificsSegButtons 使用 &:nth-child(6n+0)

其他一切都是一样的。

有没有办法将一个类的共同点分解为一个类，而另一个类中的不同点则避免所有这些重复的 CSS 指令

@include field-radio-appearance($appearance-class: "PrelimsSpecificsSegButtons") {

  #{$field-state-disabled-selector} {

    opacity: .6;

    &:hover {
      background-color: transparent;
    }

    #{$field-textbox-selector} {
      border: 1px transparent;
      background: none;
      cursor: default;
      color: #7E7E7E;
    }
  }

  &:not(#{$field-state-disabled-selector}) {
    &:not(.VerticalOptions) {
      #{$field-option-selector} {
        &.radio-inline {

          &:hover {
            @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
          }

          #{$field-state-active-selector} {
            @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
            border: 1px solid #818181;
            z-index: 2;
          }
        }
      }
    }
  }

  &:not(.VerticalOptions):not(.OrderActivity) {

    #{$field-option-selector} {
      &.radio-inline {

        @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
        color: #333333;
        margin-right: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #b5b6ba;
        padding: 1px 10px;
        text-align: center;
        margin-left: -1px;
        height:23px;
        &:first-child {
          border-top-left-radius: 0px !important;
          border-bottom-left-radius: 0px !important;
          margin-left: 0;
        }

        &:last-child {
          border-top-right-radius: 0px !important;
          border-bottom-right-radius: 0px !important;
        }
        &:nth-child(6n+0) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(1) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(2) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(3) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(4) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(5) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        #{$field-state-active-selector} {
          @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
          border: 1px solid #818181;
          z-index: 2;
        }

        #{$field-option-label-selector} {

          padding: 0;

          &:before, &:after {
            display: none;
          }
        }
      }
    }
  }
}

@include field-radio-appearance($appearance-class: "SliderAcuityAnyButtons") {

  #{$field-state-disabled-selector} {

    opacity: .6;

    &:hover {
      background-color: transparent;
    }

    #{$field-textbox-selector} {
      border: 1px transparent;
      background: none;
      cursor: default;
      color: #7E7E7E;
    }
  }

  &:not(#{$field-state-disabled-selector}) {
    &:not(.VerticalOptions) {
      #{$field-option-selector} {
        &.radio-inline {

          &:hover {
            @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
          }

          #{$field-state-active-selector} {
            @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
            border: 1px solid #818181;
            z-index: 2;
          }
        }
      }
    }
  }

  &:not(.VerticalOptions):not(.OrderActivity) {

    #{$field-option-selector} {
      &.radio-inline {

        @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
        color: #333333;
        margin-right: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #b5b6ba;
        padding: 1px 10px;
        text-align: center;
        margin-left: -1px;
        height:23px;
        &:first-child {
          border-top-left-radius: 0px !important;
          border-bottom-left-radius: 0px !important;
          margin-left: 0;
        }

        &:last-child {
          border-top-right-radius: 0px !important;
          border-bottom-right-radius: 0px !important;
        }
        &:nth-child(6n+18) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(1) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(2) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(3) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(4) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(5) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        #{$field-state-active-selector} {
          @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
          border: 1px solid #818181;
          z-index: 2;
        }

        #{$field-option-label-selector} {

          padding: 0;

          &:before, &:after {
            display: none;
          }
        }
      }
    }
  }
}

【问题讨论】：

标签： sass

【解决方案1】：

当我问这个问题时，我也找到了答案：

现在将通用部分保留在一条规则中，名称为SliderButtons
创建一个名为PrelimExam_HideButtons 的新规则，它使用nth-child(6n+0)
创建一个名为SliderAcuityAny_HideButtons 的新规则，它使用nth-child(6n+18)

然后修改 DIV，使它们现在有两个类，普通类和特定类：

DivA 有表演等级：SliderButtons PrelimExam_HideButtons
DivB 具有外观类：SliderButtons SliderAcuityAny_HideButtons

这里是 SCSS 代码：

@include field-radio-appearance($appearance-class: "SliderButtons") {

  #{$field-state-disabled-selector} {

    opacity: .6;

    &:hover {
      background-color: transparent;
    }

    #{$field-textbox-selector} {
      border: 1px transparent;
      background: none;
      cursor: default;
      color: #7E7E7E;
    }
  }

  &:not(#{$field-state-disabled-selector}) {
    &:not(.VerticalOptions) {
      #{$field-option-selector} {
        &.radio-inline {

          &:hover {
            @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
          }

          #{$field-state-active-selector} {
            @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
            border: 1px solid #818181;
            z-index: 2;
          }
        }
      }
    }
  }

  &:not(.VerticalOptions):not(.OrderActivity) {

    #{$field-option-selector} {
      &.radio-inline {

        @include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
        color: #333333;
        margin-right: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #b5b6ba;
        padding: 1px 10px;
        text-align: center;
        margin-left: -1px;
        height:23px;
        &:first-child {
          border-top-left-radius: 0px !important;
          border-bottom-left-radius: 0px !important;
          margin-left: 0;
        }

        &:last-child {
          border-top-right-radius: 0px !important;
          border-bottom-right-radius: 0px !important;
        }

        &:nth-last-child(1) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(2) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
        &:nth-last-child(3) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(4) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        &:nth-last-child(5) {
            background: white !important;
            opacity: 0;
            pointer-events: none;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
        }
        #{$field-state-active-selector} {
          @include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
          border: 1px solid #818181;
          z-index: 2;
        }

        #{$field-option-label-selector} {

          padding: 0;

          &:before, &:after {
            display: none;
          }
        }
      }
    }
  }
}
@include field-radio-appearance($appearance-class: "PrelimExam_HideButtons") {

   &:not(.VerticalOptions):not(.OrderActivity) {

    #{$field-option-selector} {
      &.radio-inline {

        &:nth-child(6n+0) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
      }
    }
  }
}


@include field-radio-appearance($appearance-class: "SliderAcuityAny_HideButtons") {

   &:not(.VerticalOptions):not(.OrderActivity) {

    #{$field-option-selector} {
      &.radio-inline {

        &:nth-child(6n+18) {
            background: white !important;
            opacity: 0;
            .p-option-label
            {
                cursor: context-menu !important;
                pointer-events: none;
            }
            pointer-events: none;
        }
      }
    }
  }
}

【讨论】：