Question

我为所有按钮创建了几个mixin，以尝试减少重复并有助于整体性能提升。我正在寻找关于如何收紧这个问题的指导，因此它尽可能地干燥（不要重复自己）。或者它已经尽可能干了？非常感谢你的想法。这是代码：

const bodyLens = R.lensPath(['ctx', 'body'])
const reqLens = R.lensPath(['ctx','request', 'body'])

const set = R.pipe(R.view(reqLens), R.set(bodyLens))
router.post('/', ctx => {
    set(ctx)(ctx)
    ctx.body = ctx.request.body
})

Answer 1

首先，您的font-size: 12px仅由包含gradientNormal的选择器引用，因此将其移至那里是有意义的。

您还可以将active和hover州合并为一个，因为它们具有完全相同的内容：

// mixin - button shape
@mixin buttonShape {
    vertical-align:middle;
    line-height:1.333rem;
    height:2.166rem;
    color:#282a2e;
    border-radius:0;
    margin-top:1.083rem;
    margin-bottom:.333rem;
    margin-right:1.073rem;
    border:none;
    transition: background-color .2s;
}

// mixin - button gradients
@mixin gradientNormal {
    background-color:#efefee;
    background:linear-gradient(to bottom,#efefee 0,#d0d0ce 100%);
    box-shadow:inset 0 0 0 .083rem #fff;
    outline:1px solid silver;
    font-size: 12px;
}

@mixin gradientHoverActive {
    background:linear-gradient(to bottom,#ffffff 0,#ffffff 100%);
    box-shadow:inset 0 0 0 .083rem #fff;
    outline:2px solid #e87722;
}

// normal state
.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button {
    @include buttonShape;
    @include gradientNormal;
}

// hover & active
.ui-widget-header .ui-button:enabled:hover,
.ui-widget-header .ui-button:focus,
.ui-widget-content .ui-button:enabled:hover,
.ui-widget-content .ui-button:focus,
.ui-button:enabled:hover, .ui-button:focus,
.ui-widget-header .ui-button:enabled:active,
.ui-widget-content .ui-button:enabled:active,
.ui-button:enabled:active {
    @include buttonShape;
    @include gradientHoverActive;
}

你也可以根据他们使用的渐变来分离出选择器，考虑到@include buttonShape被所有三个状态引用，但这会导致更多的总行数。

希望这有帮助！：）

Answer 2

我看不到你的HTML，但我认为这可以在级联领域进一步简化 - 超过SCSS

https://jsfiddle.net/sheriffderek/qyz3tye3/

<button class='button'>
  <span>Button</span>
</button>



<section class="other-area">

  <div class='button'>
    <span>Button</span>
  </div>

</section>

...

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


$color: lightgreen;
$pad: 6px;

@mixin button() {
  // some reset stuff for <button> and <a>
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  // actual styles
  display: inline-block;
  background: $color;
  padding: $pad;
  border-radius: $pad;
  width: 100%;
  max-width: 160px;
  text-align: center;
}

@mixin strong-button() {
  padding: $pad*2 $pad*3;
  background: lightblue;
  max-width: 200px;
}

@mixin fun-button() {
  background: #ff0066;
  color: white;
}

.button {
  @include button();
}

.other-area {
  //
  .button {
    @include fun-button();
  }
}

.another-area {
  //
  .button {
    @include strong-button();
  }
}

我怎样才能让我的Sass Mixin DRY-er？

2 个答案: