html 简单的SASS按钮Mixin v0.2没有指南针（SassMeister）

Posted 2021-05-11

<button class="btn btn--primary">Primary button</button>
<button class="btn btn--secondary">Secondary button</button>

.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 8px 16px;
  box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
  font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
  white-space: nowrap;
}
.btn:active, .btn.active {
  outline: none;
  position: relative;
  top: 1px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn--primary {
  background: linear-gradient(#ec79ac, #e85f9c);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.btn--primary:hover, .btn--primary.hover {
  background: linear-gradient(#ed82b2, #e968a1);
  text-decoration: none;
}

.btn--secondary {
  background: linear-gradient(#dedede, #cecece);
  color: #707070;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn--secondary:hover, .btn--secondary.hover {
  background: linear-gradient(#e3e3e3, lightgray);
  text-decoration: none;
}

// ----
// Sass (v3.4.14)
// ----

// Button mixin
@mixin button($background-color, $text-color) {
  background: linear-gradient(lighten($background-color, 3%), darken($background-color, 3%));
  color: $text-color;

  @if lightness($text-color) < 50% {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  } @else {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  }

  &:hover,
  &.hover { 
    background: linear-gradient(lighten($background-color, 5%), darken($background-color, 1%));
    text-decoration: none;
  }
}

// Basic button styles
// You can convert this to a placeholder and extend it in the button variations below, but I like the multiple class approach myself
.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 8px 16px;
  box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
  font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
  white-space: nowrap;
  
  &:active,
  &.active {
    outline: none;
    position: relative;
    top: 1px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

// Colour variations
.btn--primary   { @include button(#ea6ca4, #fff); }
.btn--secondary { @include button(#d6d6d6, #707070); }

<button class="btn btn--primary">Primary button</button>
<button class="btn btn--secondary">Secondary button</button>