pug + Sass demo，HTML/Vue代码在线实时编辑、预览

h2 Checkbox label input(type='checkbox', name='check') span.label-text Normal label input(type='checkbox', name='check' checked) span.label-text Checked label input(type='checkbox', name='check' disabled) span.label-text Disabled

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

            
            @import "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.6.3/css/font-awesome.min.css"

body
  padding: 50px
  font-family: 'Nunito', sans-serif
  font-weight: 400
  
label
  cursor: pointer
  color: #383A3F
  display: block
  margin-bottom: 10px
  font-size: 1.2em
 
  input[type="checkbox"] + .label-text:hover:before
    color: #fe4365
    
  input[type="checkbox"]
    display: none
  
    + .label-text:before
      content: "\f096"
      color: #dddfe6
      font-family: "fontAwesome"
      line-height: 1
      width: 1em
      display: inline-block
      margin-right: 5px
      
    &:checked + .label-text:before
      content: "\f14a"
      color: #fe4365
      animation: tick 150ms ease-in
      
    &:disabled + .label-text:before
      content: "\f0c8"
      color: #dddfe6
      
@keyframes tick
  0%
    transform: scale(0)
  90%
    transform: scale(1.3)
  100%
    transform: scale(1)