scss MX-边境

Posted 2021-05-17

<div class="card border-all">
  <p>border <strong>all</strong></p>
</div>

<p>@include border(5px,solid,#0080FF,<strong>all</strong>);</p>

<div class="card border-less-bottom">
  <p>border <strong>all</strong> less <strong>bottom</strong></p>
</div>

<p>@include border(5px,solid,#0080FF,<strong>all</strong>,<strong>bottom</strong>);</p>

<div class="card border-top">
  <p>border <strong>top</strong></p>
</div>
<p>@include border(5px,dashed,#0080FF,<strong>top</strong>);</p>



 @mixin border(
    $border-size: 1px,
    $border-pattern: solid,
    $border-color: black,
    $border-position: all,
    $border-clear: none ) {
  @if $border-position == all {
    border: $border-size $border-pattern $border-color;
  }
  @else {
    border-#{$border-position}: $border-size
    $border-pattern $border-color;
  }
  @if $border-clear == none {
    $border-position: all;
  }
  @else {
    border-#{$border-clear}: none;
  }
}

/* mixin usage */
.border-all {
  @include border(5px,solid,#0080FF,all);
}
.border-less-bottom {
  @include border(5px,solid,#0080FF,all,bottom);
}
.border-top {
  @include border(5px,dashed,#0080FF,top);
}

/* demo styles */
.card {
  width: 12em;
  margin: 2em auto .5em;
  padding: 1em;
  font-size: 1.5rem;
  line-height: 1;
  background: #ccffff;
}
p {
  margin: 0;
  strong { color: #0080FF; }
}
body {
  text-align: center;
}