CSS

background:

背景图片属性，可以有多个，写法如下：

纯css 组件:

开关组件

    初始化有小毛病，介意的话，不要用。

<!-- 只需要确保 div 的类名跟下面  sass 的 根类名相同就行了 -->
<div class="btn-switch">
  <!-- id 和 for 的关系，如果有多个，按多个实现 -->
  <input type="radio"
          name="is_default"
          value="false"
          id="falsy"
          {{checked: !is_default}} />
  <label for="falsy">
    <i ></i>
  </label>
  <input type="radio"
          name="is_default"
          value="true"
          id="truthy"
          {{checked: is_default}} />
  <label for="truthy">
    <i ></i>
  </label>
</div>

$color1: #FF6F80;

$compatibility: ('', -moz-, -webkit-, -o-);

/// keyframes 混合宏
/// 使用Sass来定义Keyframes: https://www.sass.hk/skill/sass138.html
@mixin keyframes($animationName) {
    @keyframes #{$animationName} {
        @content;
    }
    
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }

    @-o-keyframes #{$animationName} {
        @content;
    }
}

/// 切换开关
.btn-switch {
  display: inline-block;
  width: 2.25rem !important;
  height: 1.25rem;
  position: relative;
  font-size: 0;
}

.btn-switch label {
  display: inline-block;
  width: 2.25rem !important;
  height: 1.25rem;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-switch label i {
  display: inline-block;
  width: 2.25rem !important;
  height: 1.25rem;
  background: #BFBFBF;
  border-radius: 0.75rem;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-switch label i::after {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  left: 1px;
  top: calc((1.25rem - 1.125rem) / 2);
  z-index: 1;
}


.btn-switch input[value=false]:checked + label {
  display: none;
}

.btn-switch input[value=false] + label i::after {
  @each $i in $compatibility {
    #{$i}animation: .3s switchOn 1 linear alternate forwards;
  }
}

.btn-switch input[value=false] + label i {
  background-color: $color1;
}

.btn-switch input[value=true]:checked + label {
  display: none;
}

.btn-switch input[value=true] + label i::after {
  @each $i in $compatibility {
    #{$i}animation: .3s switchOff 1 linear alternate forwards;
  }
}

/// @deprecated
/// 为了不在初始化的时候，因为默认未选中，而导致的动画重复。 使用 :focus
/// :not(:checked) 表示未选中的
// .btn-switch input:focus:not(:checked) + i::after {
//   @each $i in $compatibility {
//     #{$i}animation: .3s switchOff 1 linear alternate forwards;
//   }
// }

@include keyframes(switchOn) {
  from {
    left: 1px;
  }

  to {
    left: calc(100% - 1.125rem - 1px);
  }
}

@include keyframes(switchOff) {
  from {
    left: calc(100% - 1.125rem - 1px);
  }

  to {
    left: 1px;
  }
}