html - 在 SASS 中，有什么方法可以在可扩展选择器中引用选择器值吗？

Question

在 SASS 中，我想为按钮设置 hover 和 focus 伪类，以使用选择器内按钮的正常 color extends %mybutton - 这样我就不必为每种类型的按钮声明它。基本上我想知道一些方法来引用将以抽象方式继承此选择器的“子”选择器。

例如:

%mybutton {
  padding: 6px 20px;
  border-radius: 2px;

  &:hover, &:focus {
    color: <use selectors color>;
    outline: none;
  }
}

button.btn-white {
  @extend: %mybutton;
  background-color: white;
  color: black;
}

button.btn-blue {
  @extend: %mybutton;
  background-color: blue;
  color: white;
}

这可能吗？

Answer 1

是的，这应该可以通过 Sass 的 @mixin 函数实现。 [Sass Documentation #mixin]我正在使用类似的构造来构建我的类并通过例如扩展它们过渡前缀。可以采用相同的规则/构造来构建带有变量实现的“自己的”规则。

我一直有一个“核心”文件夹，其中包含我的混合函数和变量。在这个例子中，我向您展示了函数“vendor-prefix”和“placeholder”。对于您的解决方案，请在下面进一步查看。

我的例子

/* Vendor Prefixes */
@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}


/* Placeholder */
@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}
}

/* Your new Function to extend the hover, focus statements */
@mixin button-effects($color_on_hover){
     &:hover, &:focus {
         color: #{$color_on_hover);  
     }
}


To use them in a class, you can do the following.
.your_class {
   display:block; width:20px; height:20px;
   @include('transition', 'all .3s');
}

针对您的案例的解决方案

我做了一些编辑，所以该函数提供了默认颜色、悬停颜色和背景颜色的 3 个参数。我认为这对您尝试完成的大多数用例都很有用。

// Your Mixin function for extension
// @param   $color_default      Default Color state of your Button
// @param   $color_on_hover     Color on hovering your element
// @param   $background_color   Background Color of your Button element (in case of you need)
@mixin btn_build($color_default, $color_on_hover, $background_color){
    padding: 6px 20px;
    border-radius: 2px;
    color: #{$color_default};
    background-color: #{$background_color};

    &:hover, &:focus {
      color: #{$color_on_hover};
      outline: none;
    }
}


// Button base class
.button {
   display:inline-block;
   height:34px; line-height:34px;
}

// Button white
.button.btn-white {
    @include btn_build('black', 'red', 'white');
}

// Button blue
.button.btn-blue {
    @include btn_build('black', 'white', 'blue');
}

编译示例代码

实际上没有压缩，以使其具有一点可读性。默认情况下，如果你编译你可以使用压缩。例如。对于 ruby​​ sass 编译器，我使用这个:

sass --watch source:dist --style=compressed

.button {
  display: inline-block;
  height: 34px;
  line-height: 34px; }

.button.btn-white {
  padding: 6px 20px;
  border-radius: 2px;
  color: black;
  background-color: white; }
  .button.btn-white:hover, .button.btn-white:focus {
    color: red;
    outline: none; }

.button.btn-blue {
  padding: 6px 20px;
  border-radius: 2px;
  color: black;
  background-color: blue; }
  .button.btn-blue:hover, .button.btn-blue:focus {
    color: white;
    outline: none; }