-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1654 lines (1263 loc) · 219 KB
/
index.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jerome Blog</title>
<!-- keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Jerome Blog">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Jerome Blog">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Jerome Zhang">
<meta name="twitter:card" content="summary">
<link rel="alternative" href="/atom.xml" title="Jerome Blog" type="application/atom+xml">
<link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
<link rel="stylesheet" href="/css/style.css">
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85415703-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<meta name="generator" content="Hexo 5.2.0"></head>
<body>
<div id="container">
<div id="particles-js"></div>
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="https://i.loli.net/2020/12/11/tGqjVXEf9b6rM1H.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/"></a></h1>
</hgroup>
<div class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-link hide" data-idx="2">
<div class="loopback_l"></div>
<div class="loopback_r"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>菜单</li>
<li>标签</li>
<li>友情链接</li>
</ul>
</div>
</div>
<div class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/AndyZjy" title="github">github</a>
<a class="mail" target="_blank" href="/[email protected]" title="mail">mail</a>
</div>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-friends">
<a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
</div>
</section>
</div>
</div>
</header>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide"></h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img lazy-src="https://i.loli.net/2020/12/11/tGqjVXEf9b6rM1H.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author"></h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/about">关于我</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/AndyZjy" title="github">github</a>
<a class="mail" target="_blank" href="/[email protected]" title="mail">mail</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap">
<article id="post-empire" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/12/21/empire/" class="article-date">
<time datetime="2020-12-21T13:26:44.000Z" itemprop="datePublished">2020-12-21</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/12/21/empire/">
基层管理人员的部分思考 --读《大秦帝国》有感
</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 大秦帝国，最有感触的当属黑色裂变那一大段篇幅。秦国，或许在商鞅变法之前称其为“秦穷”更为妥切，内外交困，如履薄冰，任何一步没有走对便是万丈深渊。秦孝公赢渠梁继位为秦公以后，一步一步使秦国从边陲小国变为战国时期的强国霸主，期间有几处关键性的事件，而这些事件，却可以深究为我们在做管理层时需要思考的几处。</p>
<p> 一、变法</p>
<p> 求贤令，秦孝公一纸求贤令，痛言历代四任国君祖先的不足之处，同时表达出自己的大志和坚定的信念。商鞅作为法学的践行者，深访秦地三月，卫鞅走遍了秦国的一山一水，对秦国的认识也更加清晰，胸中也有了治秦的具体方略。作为一名基层管理人员，结合现在互联网企业的基层开发人员求职的几点考虑来讲，我曾经摆在首位的就是我未来的直系领导是一个什么样的人，这一点在我自身而言是远远大于其余因素的，因为我一直认为直系领导是决定自己工作体感最严重的一个因素，直系领导如果可以正视当前的情况和自己的不足，同时还会真切的帮助自己的所属开发人员进行合理的职业规划，因人而异的分配任务和规划职业发展，这一点对很多就业三年以内的人是很重要的。作为开发人员，最担心的就是自己的领导对于现在的一些技术还用之前他曾经学过的思想去思考，强行表达你必须听我的这种主观意念，会很影响一些初中级乃至高级开发人员对很多事情的看法，因为当它们还处在很具有很强的可塑性的时候，将他们强行塑造了五年前甚至十年前的互联网开发人员的体系，这样往小了说，基层开发人员的好苗子无法快速提升自己，无法快速的成为独当一面或者团队中的攻坚力量，对于团队的发展长期来看也是弊大于利。其次就是基层管理人员应该深入集体，不要好高骛远，要深入的了解每个人的擅长和体系，将他们放在合适的岗位，进行他们具有兴趣和热情的工作，同时为每个人制定合理的拔高规划，我相信每个人的潜力和可塑性都是很强的，但是如果不是平时利用吃饭的时间多和大家在一起进行沟通和交流，永远不打破自己的小圈子的话，是无法了解每个人的想法和意愿的，那么在绩效制定的时候为每个人制定的绩效拔高部分，也只是存在于我认为怎样怎样中，并没有太具体的意义，那样只是为了KPI而制定KPI。就像变法前夕一样，要深入了解“秦国”，并正视事实，才可以做到最大化的形成团队的一股劲。</p>
<p> 二、一夫作难而七庙隳</p>
<p> 大秦帝国的覆灭，属于盛极而衰的典型，而且是衰弱的极其迅速，仅二世便灭亡。读到此处，其实更怀念的是第一部裂变时期。 我如松柏，君如青山，秦人的诺言就是如此凛冽，却字字铮铮。身为互联网企业这波时代的大浪参与人员，同时有幸作为一名基层管理人员，时刻要具有危机意识和自己的思考，危机意识人云亦云，其实每个人都想处在自己的舒适圈里，不要去接触外界复杂多变的琐事和烦恼，但是毕竟与父母所经历的时代不同，没有一份“铁饭碗”在自己的眼前，同时自愿走上互联网开发这条路的人都是不甘于铁饭碗的人，所以要时刻思考自己对于当前所处的团队的作用和价值是什么，每个人都是不同的，对于团队的价值也是不同的，所以一直都要有一个自己的职业规划，什么时间要学会什么，或者什么时间要做出来什么，就跟跑马拉松一样，一个一个的目标树立起来，当没完成的时候自己是否会逼迫自己一把？当完成的时候，是否自己又在自己的人生经历上多写了一笔靓丽的色彩？危机意识是促使自己和团队前进的一股巨大的力量。</p>
<p> 文笔有限，思考很多，但是不足以成文，欢迎大家批评指正</p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-cssFilter" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/12/11/cssFilter/" class="article-date">
<time datetime="2020-12-11T07:50:55.000Z" itemprop="datePublished">2020-12-11</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/12/11/cssFilter/">
CSS色调旋转滤镜
</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<div class="lake-engine-view lake-typography-traditional">
<h1 id="pKs9e" data-lake-id="8131c1f47e7cac4295d097acb87aae5c" data-wording="true">一 关于filter</h1>
<p data-lake-id="231d2493b8b8cb2dbd59d80dfbeb9bc3" data-wording="true">首先看一下官方对于CSS的filter属性的定义：</p>
<blockquote>
<p data-lake-id="2a21b3db9bf0bf7c3666d507f5d3de3e" data-wording="true"><span class="lake-fontsize-12">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p>
</blockquote>
<p data-lake-id="b047d0b8615fd6ec5546f663bad33fa1" data-wording="true">本文主要讲的是filter中的一个属性：hue-rotate。官方定义是：</p>
<blockquote>
<p data-lake-id="86a5f9375381429a99d93656b34c6a12" data-wording="true">给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p>
</blockquote>
<p data-lake-id="a54ab0153db832d856612c7bec51dfc6" data-wording="true">本文主要是通过一些demo和思考来讲述其强大和便捷之处。</p>
<h1 id="jHJtu" data-lake-id="877e8474595c6d65a970614441a27ca0" data-wording="true">二 代码差异</h1>
<p data-lake-id="3ab4c150bb17b9051ff05f39504ce760" data-wording="true">首先来写一个带有hover特效的button组件吧～代码如下：</p>
<div id="64cTH" class="lake-card-margin" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Cbutton%20class%3D%5C%22btn%20btn-primary%5C%22%3Eprimary%3C%2Fbutton%3E%5Cn%3Cbutton%20class%3D%5C%22btn%20btn-primary-filter%5C%22%3Eprimary-filter%3C%2Fbutton%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%2264cTH%22%7D" data-language="html">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"><<span class="cm-tag">button <span class="cm-attribute">class=<span class="cm-string">"btn btn-primary"<span class="cm-tag cm-bracket">>primary<span class="cm-tag cm-bracket"></<span class="cm-tag">button<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"><<span class="cm-tag">button <span class="cm-attribute">class=<span class="cm-string">"btn btn-primary-filter"<span class="cm-tag cm-bracket">>primary-filter<span class="cm-tag cm-bracket"></<span class="cm-tag">button<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<div id="QDkKA" class="lake-card-margin" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22css%22%2C%22code%22%3A%22.btn%7B%5Cn%20%20padding%3A%204px%2015px%3B%5Cn%20%20outline%3A%20none%3B%5Cn%20%20border%3A%20none%3B%5Cn%20%20border-radius%3A%203px%3B%5Cn%20%20margin%3A%2010px%2020px%3B%5Cn%20%20cursor%3A%20pointer%3B%5Cn%20%20color%3A%20%23fff%3B%5Cn%20%20background%3A%20%231890ff%3B%5Cn%20%20border-color%3A%20%231890ff%3B%5Cn%20%20box-shadow%3A%200%202px%200%20rgba(0%2C0%2C0%2C.045)%3B%5Cn%7D%5Cn.btn-primary%3Ahover%7B%5Cn%20%20background-color%3A%20%23096dd9%3B%5Cn%20%20border-color%3A%20%23096dd9%3B%5Cn%20%20color%3A%20%23fff%3B%20%5Cn%7D%5Cn.btn-primary-filter%3Ahover%7B%5Cn%20%20filter%3A%20hue-rotate(15deg)%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22QDkKA%22%7D" data-language="css">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.btn{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">padding: <span class="cm-number">4px <span class="cm-number">15px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">outline: <span class="cm-atom">none;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">border: <span class="cm-atom">none;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">3px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">margin: <span class="cm-number">10px <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">cursor: <span class="cm-atom">pointer;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">#fff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">background: <span class="cm-atom">#1890ff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-color: <span class="cm-atom">#1890ff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-shadow: <span class="cm-number">0 <span class="cm-number">2px <span class="cm-number">0 <span class="cm-atom">rgba(<span class="cm-number">0,<span class="cm-number">0,<span class="cm-number">0,<span class="cm-number">.045);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.btn-primary:<span class="cm-variable-3">hover{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background-color: <span class="cm-atom">#096dd9;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-color: <span class="cm-atom">#096dd9;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">#fff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.btn-primary-filter:<span class="cm-variable-3">hover{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">filter: <span class="cm-variable">hue-rotate(<span class="cm-number">15deg);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="76d1f3713108cd4d80450d5ad4f9f7ac" data-wording="true">效果如下：</p>
<p data-lake-id="76d1f3713108cd4d80450d5ad4f9f7ac" data-wording="true" style="text-align: center"><img src="https://i.loli.net/2020/12/01/CG3pI65XRWOrNA4.gif" /></p>
<p data-lake-id="1ec8dacfa7b1464b7e7069a9ecc2b16c" data-wording="true">通过动图可以看到，两个button组件的效果基本类似，但是代码量是有一定的差距的，目前我们只写了hover的特效，当我们加上其余的状态以后，代码量的差距会更大。</p>
<p data-lake-id="2f0a8a8899edbb59f467f00f41e03980" data-wording="true">开胃菜我们吃的差不多了，我们搞点事情：</p>
<p data-lake-id="f262f90920d7143568927daedbc6dd84" data-wording="true" style="text-align: center"><span class="lake-card-margin-top lake-card-margin-bottom" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fpng%2F346819%2F1606808183728-184bbe7e-9a88-4e11-8022-0d9d17ca917e.png%22%2C%22originWidth%22%3A640%2C%22originHeight%22%3A640%2C%22name%22%3A%22image.png%22%2C%22size%22%3A216552%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%7B%22x%22%3A52.997356%2C%22y%22%3A4.588247%2C%22width%22%3A544.5142440000001%2C%22height%22%3A143.689083%2C%22text%22%3A%22%E9%AB%98%E4%BA%8B%E6%83%85%E5%95%8A!%22%7D%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%E9%AB%98%E4%BA%8B%E6%83%85%E5%95%8A!%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A160%2C%22height%22%3A160%7D"><img src="https://i.loli.net/2020/12/14/OzsyTd7uxaNg52r.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="160px" /></span></p>
<p data-lake-id="01cd0f1175872644f6fe1ea75a1c4f20" data-wording="true">我们经常看到进度条，但是更多时候的动画效果都是通过js实现的，我们这次可以做一个根据进度而时刻变化颜色的进度条，走起走起：</p>
<p data-lake-id="e9bd95b1e1195047b9ad6e2f74f8b342" data-wording="true">首先我们要有一个进度条：</p>
<p data-lake-id="f3ee9d53687870445d7d230826edf8ee" style="text-align: center"><span class="lake-card-margin-top lake-card-margin-bottom" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fpng%2F346819%2F1606809717227-3ca954a4-3310-47c1-b9ea-5ebd3da05980.png%22%2C%22originWidth%22%3A1472%2C%22originHeight%22%3A328%2C%22name%22%3A%22image.png%22%2C%22size%22%3A20978%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A736%2C%22height%22%3A164%7D"><img src="https://i.loli.net/2020/12/14/P8Bd35kljbDvZeJ.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="164px" /></span></p>
<p data-lake-id="81b10be3180c0c238afdcaae88c79ff1" data-wording="true">其次我们要让它动起来，根据我们的进度保持颜色的递进变化，代码如下：</p>
<div id="zeBJ0" class="lake-card-margin" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22main%5C%22%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22demo%5C%22%3E%3C%2Fdiv%3E%5Cn%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22zeBJ0%22%7D" data-language="html">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"main"<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"demo"<span class="cm-tag cm-bracket">><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<div id="i34Yj" class="lake-card-margin" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22css%22%2C%22code%22%3A%22.main%7B%5Cn%20%20margin%3A%20100px%20auto%3B%5Cn%20%20width%3A%20600px%3B%5Cn%20%20height%3A%2060px%3B%5Cn%20%20position%3A%20relative%3B%5Cn%7D%5Cn.demo%7B%5Cn%20%20height%3A%20100%25%3B%5Cn%20%20box-sizing%3A%20border-box%3B%5Cn%20%20border-radius%3A%2015px%2030px%2030px%2015px%3B%5Cn%20%20filter%3A%20drop-shadow(0%201px%203px%20rgba(0%2C0%2C0%2C0.22))%3B%20%2F%2F%20%E9%98%B4%E5%BD%B1%E6%95%88%E6%9E%9C%5Cn%20%20background%3A%20%23fff%3B%5Cn%7D%5Cn%5Cn.demo%3A%3Aafter%20%7B%5Cn%20%20content%3A%20%5C%22%5C%22%3B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20top%3A%200%3B%5Cn%20%20left%3A%200%3B%5Cn%20%20bottom%3A%200%3B%5Cn%20%20right%3A%20100%25%3B%5Cn%20%20%2F%2F%20%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E7%BB%99%E4%B8%AA%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C%5Cn%20%20background%3A%20linear-gradient(to%20bottom%2C%20%237abcff%200%25%2C%20%2300BCD4%2044%25%2C%20%232196F3%20100%25)%3B%5Cn%20%20border-radius%3A%200px%200px%205px%205px%3B%5Cn%20%20box-shadow%3A%200%2014px%2028px%20rgba(33%2C%20150%2C%20243%2C%200)%2C%200%2010px%2010px%20rgba(9%2C%20188%2C%20215%2C%200.08)%3B%5Cn%20%20animation%3A%20charging%205s%20linear%20infinite%3B%5Cn%20%20filter%3A%20hue-rotate(110deg)%3B%5Cn%7D%5Cn%5Cn%40keyframes%20charging%20%7B%5Cn%20%2050%25%20%7B%5Cn%20%20%20%20box-shadow%3A%200%2014px%2028px%20rgba(0%2C%20150%2C%20136%2C%200.83)%2C%200px%204px%2010px%20rgba(9%2C%20188%2C%20215%2C%200.4)%3B%5Cn%20%20%7D%5Cn%5Cn%20%2095%25%20%7B%5Cn%20%20%20%20right%3A%205%25%3B%5Cn%20%20%20%20filter%3A%20hue-rotate(0deg)%3B%5Cn%20%20%20%20border-radius%3A%200%200%205px%205px%3B%5Cn%20%20%20%20box-shadow%3A%200%2014px%2028px%20rgba(4%2C%20188%2C%20213%2C%20.2)%2C%200%2010px%2010px%20rgba(9%2C%20188%2C%20215%2C%200.08)%3B%5Cn%20%20%7D%5Cn%20%20100%25%20%7B%5Cn%20%20%20%20right%3A%200%25%3B%5Cn%20%20%20%20filter%3A%20hue-rotate(0deg)%3B%5Cn%20%20%20%20border-radius%3A%2015px%2015px%205px%205px%3B%5Cn%20%20%20%20box-shadow%3A%200%2014px%2028px%20rgba(4%2C%20188%2C%20213%2C%200)%2C%200%2010px%2010px%20rgba(9%2C%20188%2C%20215%2C%200.4)%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22i34Yj%22%7D" data-language="css">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.main{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">margin: <span class="cm-number">100px <span class="cm-atom">auto;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-number">600px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">height: <span class="cm-number">60px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">position: <span class="cm-atom">relative;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.demo{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">height: <span class="cm-number">100%;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-sizing: <span class="cm-atom">border-box;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">15px <span class="cm-number">30px <span class="cm-number">30px <span class="cm-number">15px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">filter: <span class="cm-variable">drop-shadow(<span class="cm-number">0 <span class="cm-number">1px <span class="cm-number">3px <span class="cm-atom">rgba(<span class="cm-number">0,<span class="cm-number">0,<span class="cm-number">0,<span class="cm-number">0.22)); // 阴影效果
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background: <span class="cm-atom">#fff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.demo::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">content: <span class="cm-string">"";
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">position: <span class="cm-atom">absolute;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">top: <span class="cm-number">0;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">left: <span class="cm-number">0;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">bottom: <span class="cm-number">0;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">right: <span class="cm-number">100%;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> // 背景颜色给个渐变效果
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background: <span class="cm-atom">linear-gradient(<span class="cm-atom">to <span class="cm-atom">bottom, <span class="cm-atom">#7abcff <span class="cm-number">0%, <span class="cm-atom">#00BCD4 <span class="cm-number">44%, <span class="cm-atom">#2196F3 <span class="cm-number">100%);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">0px <span class="cm-number">0px <span class="cm-number">5px <span class="cm-number">5px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-shadow: <span class="cm-number">0 <span class="cm-number">14px <span class="cm-number">28px <span class="cm-atom">rgba(<span class="cm-number">33, <span class="cm-number">150, <span class="cm-number">243, <span class="cm-number">0), <span class="cm-number">0 <span class="cm-number">10px <span class="cm-number">10px <span class="cm-atom">rgba(<span class="cm-number">9, <span class="cm-number">188, <span class="cm-number">215, <span class="cm-number">0.08);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">animation: <span class="cm-variable">charging <span class="cm-number">5s <span class="cm-atom">linear <span class="cm-atom">infinite;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">filter: <span class="cm-variable">hue-rotate(<span class="cm-number">110deg);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">@keyframes <span class="cm-variable">charging {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-number">50% {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-shadow: <span class="cm-number">0 <span class="cm-number">14px <span class="cm-number">28px <span class="cm-atom">rgba(<span class="cm-number">0, <span class="cm-number">150, <span class="cm-number">136, <span class="cm-number">0.83), <span class="cm-number">0px <span class="cm-number">4px <span class="cm-number">10px <span class="cm-atom">rgba(<span class="cm-number">9, <span class="cm-number">188, <span class="cm-number">215, <span class="cm-number">0.4);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> }
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-number">95% {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">right: <span class="cm-number">5%;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">filter: <span class="cm-variable">hue-rotate(<span class="cm-number">0deg);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">0 <span class="cm-number">0 <span class="cm-number">5px <span class="cm-number">5px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-shadow: <span class="cm-number">0 <span class="cm-number">14px <span class="cm-number">28px <span class="cm-atom">rgba(<span class="cm-number">4, <span class="cm-number">188, <span class="cm-number">213, <span class="cm-number">.2), <span class="cm-number">0 <span class="cm-number">10px <span class="cm-number">10px <span class="cm-atom">rgba(<span class="cm-number">9, <span class="cm-number">188, <span class="cm-number">215, <span class="cm-number">0.08);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> }
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-number">100% {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">right: <span class="cm-number">0%;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">filter: <span class="cm-variable">hue-rotate(<span class="cm-number">0deg);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">15px <span class="cm-number">15px <span class="cm-number">5px <span class="cm-number">5px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">box-shadow: <span class="cm-number">0 <span class="cm-number">14px <span class="cm-number">28px <span class="cm-atom">rgba(<span class="cm-number">4, <span class="cm-number">188, <span class="cm-number">213, <span class="cm-number">0), <span class="cm-number">0 <span class="cm-number">10px <span class="cm-number">10px <span class="cm-atom">rgba(<span class="cm-number">9, <span class="cm-number">188, <span class="cm-number">215, <span class="cm-number">0.4);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> }
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="6fb1ad6ef343ee412c11722cb67ab950" data-wording="true">效果如下：</p>
<div id="nmVnp" class="lake-card-margin" data-card-type="block" data-lake-card="video" data-card-value="data:%7B%22status%22%3A%22done%22%2C%22name%22%3A%22Dec-01-2020%2016-04-27.gif%22%2C%22size%22%3A462026%2C%22percent%22%3A100%2C%22taskId%22%3A%22drynierUcO1Y%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22nmVnp%22%2C%22videoId%22%3A%22inputs%2Fprod%2Fyuque%2F2020%2F346819%2Fgif%2F1606809893953-37013d18-6eb9-4f8d-831f-5262e1da2578.gif%22%7D" style="text-align: center"><img src="https://i.loli.net/2020/12/01/VUlqsi9kQIu6XJS.gif" /></div>
<p data-lake-id="045fba94f6f408770f8b8cde4e193f6c" data-wording="true">如上，我们这里有一个小小的暗箱操作，就是我们无法对一个渐变色进行动画animation，但是我们可以通过<span class="lake-fontsize-1515">hue-rotate的方式，利用滤镜进行颜色的变化，从而实现当前的效果。</span></p>
<h1 id="sElQK" data-lake-id="628d7cfbcbce8d4135b1dc60fabaf395" data-wording="true">三 总结</h1>
<p data-lake-id="41812fafa7429373db304fa1bc413f3a" data-wording="true">举一反三，该属性玩得顺了的话，其实可以做到很多让人眼前一亮的效果，最直接的就是我们可以将我们的个人博客首页，做根据当前时区和时间而变化的背景色。当然了，安卓手机现在的充电效果也可以做到，但是想要做出来肯定需要一定的css熟练度。我们在使用过程中，通过不断的调节filter里面属性的数据，可以得到差异效果很大的动画，当然了，好的效果需要不断的调试，但是这样会使我们的业务开发变得更加的有乐趣～</p>
<p data-lake-id="104cc87c361a4a2c7642b9c777775a84" data-wording="true">最后，欢迎指正和修改本文～</p>
</div>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-lerna" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/11/11/lerna/" class="article-date">
<time datetime="2020-11-11T07:00:55.000Z" itemprop="datePublished">2020-11-11</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/11/11/lerna/">
Lerna初探
</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="BPMpI" data-lake-id="12b37c98fbf87cd914e80d6823b95196">1、简介</h3>
<p data-lake-id="8e82672f1862e940f4e324455cafdf08">首先是关于Monorepo（<a href="https://zhuanlan.zhihu.com/p/77577415" target="_blank">一篇不错的介绍Monorepo的文章</a>），它是管理项目代码的一种方式，主要手段是通过在一个项目仓库中管理多个模块/仓库包。而Multirepo是传统的仓库管理方法，也是公司目前所用的方法，即所有的项目包都是独立仓库部署和管理。两种方式对比如下：</p>
<p data-lake-id="59543dc7a0fcad8d1445ca5a51269018" style="text-align: center"><img src="https://i.loli.net/2020/12/14/qIkHoXFuGaSBzpE.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="495px" /></p>
<p data-lake-id="2a937bd70eb1fc66784e682ebd14b5fd">两种方式进行对比的话，千人千面。前者允许多元化发展（各项目可以有自己的构建工具、依赖管理策略、单元测试方法），后者希望集中管理，减少项目间的差异带来的沟通成本。</p>
<p data-lake-id="cd3a332f22d784bfc474ef20f593408e">虽然拆分子仓库、拆分子 npm 包是进行项目隔离的天然方案，但当仓库内容出现关联时，没有任何一种调试方式比源码放在一起更高效。</p>
<p data-lake-id="6273c882c1b10cd1c30a245e9c10effd">在前端开发环境中，多 Git Repo，多 npm 则是这个理想的阻力，它们导致复用要关心版本号，调试需要 npm link。而这些是 MonoRepo 最大的优势。</p>
<p data-lake-id="84c330999beda36dee9006e665b1a98c">上图中提到的利用相关工具就是今天的主角 Lerna ! Lerna是业界知名度最高的 Monorepo 管理工具，功能完整。而且目前很多大型开源项目都采用了这种方式，比如Babel、React、Meteor、Ember、Jest、Vue等等，当我们查看他们的源码时，可以发现他们的目录都是将主要内容放在packages目录中，分多个模块进行管理。</p>
<h3 id="jU77r" data-lake-id="f2a881389188e92743b5ffba2c3ab97d">2、使用</h3>
<h4 id="HkgxL" data-lake-id="990af1c365fa11610f0aadb9544ef999">2.1、全局安装Lerna</h4>
<div id="OoNGd" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22npm%20install%20lerna%20-g%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22OoNGd%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-builtin">npm install lerna <span class="cm-attribute">-g</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="d1233715fc463fafba2fe79843e03a7d">或者</p>
<div id="lWntQ" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22yarn%20add%20lerna%20-D%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22lWntQ%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">yarn add lerna <span class="cm-attribute">-D</span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="1f07df865af6dbab8ca291677adf9135">安装完成后，在控制台输入lerna -v，只要可以显示版本号，就意味着我们安装成功了。控制台输出如下图：</p>
<p data-lake-id="231fcaa2a360ed995d14c397fdb4b8ae" style="text-align: center"><img src="https://i.loli.net/2020/12/14/Nxs1u5qekmlpfaV.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="104px" /></p>
<h4 id="b368R" data-lake-id="8ff2cdec5fc93a98d0af7ede67aa6bbc">2.2、初始化</h4>
<p data-lake-id="3fb18b6b920bd84b3d87c62a8e4f1785">初始化之前的步骤无非两种，第一种是创建一个lerna-repo目录，第二种是在git上创建一个项目lerna-repo并clone到本地，然后本地进入该目录并执行</p>
<div id="gjJTb" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22npx%20lerna%20init%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22gjJTb%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">npx lerna init</span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="3fea212cf77b64ea3d961e18d7d78bd4">一开始我们都是使用lerna的默认模式我们的目录结构会变成如下：</p>
<p data-lake-id="79d2ba6f04ab2ec4b97f57510d542890" style="text-align: center"><img src="https://i.loli.net/2020/12/14/fgDnMYGpBaOshmz.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="116px" /></p>
<p data-lake-id="841d2081e0542459ee78e0f1bea7b423">顾名思义，lerna.json就是Lerna的配置文件，里面可以进行不同的业务或者不同的场景的配置话定义，我们可以查看初始化的lerna.json的文件，如下图：</p>
<p data-lake-id="49ef5bc36bd063c5449e46ffee523487" style="text-align: center"><img src="https://i.loli.net/2020/12/14/s1ohqu25WKU8IYJ.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="235px" /></p>
<p data-lake-id="5ec4f70c61ff1685fe86ab32b776e074">首先就是packages属性，它的类型是一个数组，在这里可以配置可以发布的npm包的目录，可以根据不同的场景进行定义发布的npm包所在的不同的文件夹。其次的属性version就是当前lerna项目的版本号。</p>
<h4 id="qQPHx" data-lake-id="5e8bde3ea1ecda45ec65f5795fef8609">2.3、引入npm包/生成一个npm包</h4>
<p data-lake-id="36588a5dbd9b304981299b78c66e6916">这里不得不介绍一下引入npm包的强大之处，它可以把你引入的包的git commit记录完整的引入。我们一般都是先将要引入的包下载到本地，命令如下：</p>
<div id="9jM8u" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20import%20..%2Fuserlogin%20%20%20%22%2C%22margin%22%3Atrue%2C%22id%22%3A%229jM8u%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna import ../userlogin </span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="49f4cc326985fb8b8d00bba20416c6dc">如果是新项目，需要新生成一个npm包的话，可以使用如下命令lerna create <包名> [目录]：</p>
<div id="6AVNH" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20create%20base%20packages%2Fnpm%20%22%2C%22margin%22%3Atrue%2C%22id%22%3A%226AVNH%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna create base packages/npm </span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="838f3b96ebfc9e9348c2014b5054b963"><span class="lake-fontsize-10">ps:此处npm为原有目录；</span></p>
<p data-lake-id="2abdeebc3148da93d5b37ffd13427d7b">引入一个npm包其实还可以通过进入当前packages文件夹下，通过git clone的方式进行引入，这种优点是可以自由的在某一个项目中进行切换分支，如果是import的方式引入的npm包，目前我是没找到自由切换单项目分支的方式，欢迎大家补充。<span class="lake-fontsize-10"><br /></p>
<p data-lake-id="e65b89affd6062ead93a75698b97cd2e">create时，按照lerna的提示输入name、version等属性就好了，如果为了省事可以一路回车走到最后，它就会以默认值的形式生成一个新的npm包。</p>
<p data-lake-id="2482c8de149714cbe98cb796b48e03de">无论是引入的npm包，还是生成的npm包，默认目录都是在当前项目根目录下的packages文件夹下，生成的目录如下：</p>
<p data-lake-id="a617d27acccd4ae98e59a5be1657e098" style="text-align: center"><img src="https://i.loli.net/2020/12/14/pNdEtX7iRUBDcov.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="159px" /></p>
<p data-lake-id="8fedd3e16dfc67abb09c749d438a8bfa">此处会有几种常见的错误展示，第一种就是由于你是新建的lerna项目，没有进行git commit，这时候进行lerna import会报错如下：</p>
<div id="iVwr6" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22Error%3A%20Command%20failed%3A%20git%20rev-parse%20HEAD%5Cnlerna%20ERR!%20fatal%3A%20ambiguous%20argument%20'HEAD'%3A%20unknown%20revision%20or%20path%20not%20in%20the%20working%20tree.%5Cnlerna%20ERR!%20Use%20'--'%20to%20separate%20paths%20from%20revisions%2C%20like%20this%3A%5Cnlerna%20ERR!%20'git%20%3Ccommand%3E%20%5B%3Crevision%3E...%5D%20--%20%5B%3Cfile%3E...%5D'%5Cnlerna%20ERR!%20%5Cnlerna%20ERR!%20HEAD%5Cnlerna%20ERR!%20%5Cnlerna%20ERR!%20at%20makeError%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2Fexeca%2Findex.js%3A174%3A9)%5Cnlerna%20ERR!%20at%20Function.module.exports.sync%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2Fexeca%2Findex.js%3A338%3A15)%5Cnlerna%20ERR!%20at%20Object.execSync%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fchild-process%2Findex.js%3A22%3A16)%5Cnlerna%20ERR!%20at%20ImportCommand.getCurrentSHA%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fimport%2Findex.js%3A129%3A34)%5Cnlerna%20ERR!%20at%20ImportCommand.initialize%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fimport%2Findex.js%3A98%3A31)%5Cnlerna%20ERR!%20at%20Promise.resolve.then%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fcommand%2Findex.js%3A266%3A24)%5Cnlerna%20ERR!%20at%20%3Canonymous%3E%5Cnlerna%20ERR!%20lerna%20Command%20failed%3A%20git%20rev-parse%20HEAD%5Cnlerna%20ERR!%20lerna%20fatal%3A%20ambiguous%20argument%20'HEAD'%3A%20unknown%20revision%20or%20path%20not%20in%20the%20working%20tree.%5Cnlerna%20ERR!%20lerna%20Use%20'--'%20to%20separate%20paths%20from%20revisions%2C%20like%20this%3A%5Cnlerna%20ERR!%20lerna%20'git%20%3Ccommand%3E%20%5B%3Crevision%3E...%5D%20--%20%5B%3Cfile%3E...%5D'%5Cnlerna%20ERR!%20lerna%20%5Cnlerna%20ERR!%20lerna%20HEAD%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22iVwr6%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">Error: Command failed: <span class="cm-builtin">git rev-parse HEAD
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! fatal: ambiguous argument <span class="cm-string">'HEAD': unknown revision or path not <span class="cm-keyword">in the working tree.
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! Use <span class="cm-string">'--' to separate paths from revisions, like this:
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! <span class="cm-string">'git <command> [<revision>...] -- [<file>...]'
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR!
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! HEAD
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR!
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at makeError (/usr/local/lib/node_modules/lerna/node_modules/execa/index.js:174:9)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at Function.module.exports.sync (/usr/local/lib/node_modules/lerna/node_modules/execa/index.js:338:15)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at Object.execSync (/usr/local/lib/node_modules/lerna/node_modules/@lerna/child-process/index.js:22:16)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at ImportCommand.getCurrentSHA (/usr/local/lib/node_modules/lerna/node_modules/@lerna/import/index.js:129:34)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at ImportCommand.initialize (/usr/local/lib/node_modules/lerna/node_modules/@lerna/import/index.js:98:31)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at Promise.resolve.then (/usr/local/lib/node_modules/lerna/node_modules/@lerna/command/index.js:266:24)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at <anonymous>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna Command failed: <span class="cm-builtin">git rev-parse HEAD
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna fatal: ambiguous argument <span class="cm-string">'HEAD': unknown revision or path not <span class="cm-keyword">in the working tree.
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna Use <span class="cm-string">'--' to separate paths from revisions, like this:
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna <span class="cm-string">'git <command> [<revision>...] -- [<file>...]'
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna HEAD</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="88380c1dc21c77a21fc8423465f64203">如果你没有初始化git项目的话，会有如下报错：</p>
<div id="9fwj9" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22cli%20v3.8.0%5Cnlerna%20ERR!%20Error%3A%20Command%20failed%3A%20git%20log%20--format%3D%25h%5Cnlerna%20ERR!%20fatal%3A%20Not%20a%20git%20repository%20(or%20any%20of%20the%20parent%20directories)%3A%20.git%5Cnlerna%20ERR!%20%5Cnlerna%20ERR!%20%5Cnlerna%20ERR!%20at%20makeError%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2Fexeca%2Findex.js%3A174%3A9)%5Cnlerna%20ERR!%20at%20Function.module.exports.sync%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2Fexeca%2Findex.js%3A338%3A15)%5Cnlerna%20ERR!%20at%20Object.execSync%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fchild-process%2Findex.js%3A22%3A16)%5Cnlerna%20ERR!%20at%20ImportCommand.externalExecSync%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fimport%2Findex.js%3A137%3A34)%5Cnlerna%20ERR!%20at%20ImportCommand.initialize%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fimport%2Findex.js%3A82%3A25)%5Cnlerna%20ERR!%20at%20Promise.resolve.then%20(%2Fusr%2Flocal%2Flib%2Fnode_modules%2Flerna%2Fnode_modules%2F%40lerna%2Fcommand%2Findex.js%3A266%3A24)%5Cnlerna%20ERR!%20at%20%3Canonymous%3E%5Cnlerna%20ERR!%20lerna%20Command%20failed%3A%20git%20log%20--format%3D%25h%5Cnlerna%20ERR!%20lerna%20fatal%3A%20Not%20a%20git%20repository%20(or%20any%20of%20the%20parent%20directories)%3A%20.git%5Cnlerna%20ERR!%20lerna%20%22%2C%22margin%22%3Atrue%2C%22id%22%3A%229fwj9%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">cli v3.8.0
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! Error: Command failed: <span class="cm-builtin">git log <span class="cm-attribute">--format<span class="cm-operator">=%h
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! fatal: Not a <span class="cm-builtin">git repository (or any of the parent directories): .git
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR!
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR!
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at makeError (/usr/local/lib/node_modules/lerna/node_modules/execa/index.js:174:9)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at Function.module.exports.sync (/usr/local/lib/node_modules/lerna/node_modules/execa/index.js:338:15)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at Object.execSync (/usr/local/lib/node_modules/lerna/node_modules/@lerna/child-process/index.js:22:16)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! at ImportCommand.externalExecSync (/usr/local/lib/node_modules/lerna/node_modules/@lerna/import/index.js:137:34)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at ImportCommand.initialize (/usr/local/lib/node_modules/lerna/node_modules/@lerna/import/index.js:82:25)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at Promise.resolve.then (/usr/local/lib/node_modules/lerna/node_modules/@lerna/command/index.js:266:24)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! at <anonymous>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna Command failed: <span class="cm-builtin">git log <span class="cm-attribute">--format<span class="cm-operator">=%h
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna fatal: Not a <span class="cm-builtin">git repository (or any of the parent directories): .git
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! lerna </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="8d503fd1d4050e282f5e13e786e7a09a">但是如果原项目是具有合并提交冲突的存储库时，import命令便无法尝试应用所有提交。此时可以使用 --flatten命令标志来请求导入固定的历史记录，也就是将每次合并提交作为单独的更改，引入合并。报错如下：</p>
<div id="NnklF" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22lerna%20ERR!%20import%20Rolling%20back%20to%20previous%20HEAD%20(commit%20e232dec13e7a62943567257eff8573db2eb1a19e)%5Cnlerna%20ERR!%20EIMPORT%20Failed%20to%20apply%20commit%202aafdfd.%5Cnlerna%20ERR!%20EIMPORT%20Command%20failed%3A%20git%20am%20-3%20--keep-non-patch%5Cnlerna%20ERR!%20EIMPORT%20Can't%20find%20Husky%2C%20skipping%20applypatch-msg%20hook%5Cnlerna%20ERR!%20EIMPORT%20You%20can%20reinstall%20it%20using%20'npm%20install%20husky%20--save-dev'%20or%20delete%20this%20hook%5Cnlerna%20ERR!%20EIMPORT%20error%3A%20Failed%20to%20merge%20in%20the%20changes.%5Cnlerna%20ERR!%20EIMPORT%20hint%3A%20Use%20'git%20am%20--show-current-patch'%20to%20see%20the%20failed%20patch%5Cnlerna%20ERR!%20EIMPORT%20Applying%3A%20feat(component)%3A%20add%20chromeDownload%20component%5Cnlerna%20ERR!%20EIMPORT%20Using%20index%20info%20to%20reconstruct%20a%20base%20tree...%5Cnlerna%20ERR!%20EIMPORT%20M%20%20%20%20packages%2Fdt-react-component%2F.storybook%2Fconfig.js%5Cnlerna%20ERR!%20EIMPORT%20Falling%20back%20to%20patching%20base%20and%203-way%20merge...%5Cnlerna%20ERR!%20EIMPORT%20Auto-merging%20packages%2Fdt-react-component%2F.storybook%2Fconfig.js%5Cnlerna%20ERR!%20EIMPORT%20CONFLICT%20(content)%3A%20Merge%20conflict%20in%20packages%2Fdt-react-component%2F.storybook%2Fconfig.js%5Cnlerna%20ERR!%20EIMPORT%20Patch%20failed%20at%200001%20feat(component)%3A%20add%20chromeDownload%20component%5Cnlerna%20ERR!%20EIMPORT%20When%20you%20have%20resolved%20this%20problem%2C%20run%20%5C%22git%20am%20--continue%5C%22.%5Cnlerna%20ERR!%20EIMPORT%20If%20you%20prefer%20to%20skip%20this%20patch%2C%20run%20%5C%22git%20am%20--skip%5C%22%20instead.%5Cnlerna%20ERR!%20EIMPORT%20To%20restore%20the%20original%20branch%20and%20stop%20patching%2C%20run%20%5C%22git%20am%20--abort%5C%22.%5Cnlerna%20ERR!%20EIMPORT%20%5Cnlerna%20ERR!%20EIMPORT%20%5Cnlerna%20ERR!%20EIMPORT%20You%20may%20try%20again%20with%20--flatten%20to%20import%20flat%20history.%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22NnklF%22%7D" data-language="plain">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! import Rolling back to previous HEAD (commit e232dec13e7a62943567257eff8573db2eb1a19e)
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Failed to apply commit 2aafdfd.
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Command failed: git am -3 --keep-non-patch
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Can't find Husky, skipping applypatch-msg hook
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT You can reinstall it using 'npm install husky --save-dev' or delete this hook
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT error: Failed to merge in the changes.
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT hint: Use 'git am --show-current-patch' to see the failed patch
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Applying: feat(component): add chromeDownload component
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Using index info to reconstruct a base tree...
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT M packages/dt-react-component/.storybook/config.js
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Falling back to patching base and 3-way merge...
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Auto-merging packages/dt-react-component/.storybook/config.js
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT CONFLICT (content): Merge conflict in packages/dt-react-component/.storybook/config.js
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT Patch failed at 0001 feat(component): add chromeDownload component
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT When you have resolved this problem, run "git am --continue".
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT If you prefer to skip this patch, run "git am --skip" instead.
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT To restore the original branch and stop patching, run "git am --abort".
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna ERR! EIMPORT You may try again with --flatten to import flat history.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="705e144739128cf9ed56da0007b86597">命令如下：</p>
<div id="wkGAJ" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22%24%20lerna%20import%20..%2Fbase%20--flatten%22%2C%22id%22%3A%22wkGAJ%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna import ../base <span class="cm-attribute">--flatten</span></span></span></span></span></pre>
</div>
</div>
</div>
<h4 id="CUsN7" data-lake-id="36a8b6fc865649cf490d01d03e4438b4">2.4、显示当前列表</h4>
<div id="JTNFR" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20list%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22JTNFR%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna list</span></span></span></pre>
</div>
</div>
</div>
<h4 id="BgccG" data-lake-id="53c4e03b4edcea329787c0214f6fed6a">2.5、 为项目包添加依赖</h4>
<p data-lake-id="b4f0ab10411e31c557dcefc2a99dc1fd">命令格式：</p>
<div id="90WzV" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20add%20%E5%8C%85%E5%90%8D%20%5B--scope%3D%E7%89%B9%E5%AE%9A%E7%9A%84%E6%9F%90%E4%B8%AA%E5%8C%85%5D%22%2C%22margin%22%3Atrue%2C%22id%22%3A%2290WzV%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna add 包名 <span class="cm-def">[--scope<span class="cm-operator">=特定的某个包]</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="a04be26de522275bc6ec0a5063448f21">例子：</p>
<div id="eEj31" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20add%20component%20--scope%3Dbase%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22eEj31%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna add component <span class="cm-attribute">--scope<span class="cm-operator">=base</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="d87931fa85ce20654ebaec8c1e26b635">如上面例子代码，执行成功这段代码后，我们可以在base项目中引用component的包了，而且会自动把component包的版本号更新到base包的package.json中。此处需要注意，如果我们add的包不在我们的packages目录下，它就会自动从npm的仓库上进行下载，并且因为加了scope，所以只会给base包进行安装依赖，如果不加scope这段代码的话，会自动给packages目录下所有的包更新安装component依赖。如果原项目中在package.json中有当前npm包的配置，那么这行命令会将原配置删除，并新增当前最新版本的npm包，保证其的版本实时性。</p>
<h4 id="y11mW" data-lake-id="b36f3a2da00a6927e6d51ae6401a44e4">2.6、为每个包安装依赖</h4>
<div id="Ooulc" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20bootstrap%20--scope%3D%E7%89%B9%E5%AE%9A%E7%9A%84%E6%9F%90%E4%B8%AA%E5%8C%85%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22Ooulc%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna bootstrap <span class="cm-attribute">--scope<span class="cm-operator">=特定的某个包</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="70842d493533e280f1ed570529a3b5cb">这行代码功能和npm install或者yarn差不多，如果不加后缀scope，lerna会自动把当前工程下的所有包的依赖都安装好。</p>
<p data-lake-id="6a05fb8f093f58991d80def42b0168af">请注意，Lerna在这有一个非常强大的功能，</p>
<h4 id="Iv1kd" data-lake-id="91d1e2346e98362f930686aced58fe76">2.7、删除某个包的依赖</h4>
<div id="Cfk3K" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20clean%20--scope%3D%E7%89%B9%E5%AE%9A%E7%9A%84%E6%9F%90%E4%B8%AA%E5%8C%85%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22Cfk3K%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna clean <span class="cm-attribute">--scope<span class="cm-operator">=特定的某个包</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="662aa1f80002246097e1e45a8a9aa0f0">同安装依赖，这行代码就是删除某个包的依赖，跟rm -rf node_modules功能一致，将某个项目的node_modules删除，如果不加scope，就会默认删除全部项目的依赖，如下图，会出现提示：</p>
<h4 id="YZOrH" data-lake-id="19e3f52e9380bce90431618de30d0f23" style="text-align: center"><img src="https://i.loli.net/2020/12/14/1YjZaQOxybGetuL.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="103px" /></h4>
<h4 id="pw5ji" data-lake-id="1941f57d4f599ba59cc30f16d9a3faa8">2.8、运行项目中的script命令</h4>
<div id="ScJhL" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20run%20%E5%91%BD%E4%BB%A4%20--scope%3D%E7%89%B9%E5%AE%9A%E7%9A%84%E6%9F%90%E4%B8%AA%E5%8C%85%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22ScJhL%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna run 命令 <span class="cm-attribute">--scope<span class="cm-operator">=特定的某个包</span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="af6db61c247e79480738eb8cb605cc8b">这里可以运行start等约定好的script命令，同理，如果没有scope后缀，lerna会运行每个包的该script命令，截图如下：</p>
<p data-lake-id="fb41c11876530da3fa4e81eed7b29e30" style="text-align: center"><img src="https://i.loli.net/2020/12/14/D7JtfOQ29W48MzZ.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="67px" /></p>
<h4 id="XZSln" data-lake-id="15c5a0d40bc5d31dab1c5142703b1220">2.9、查看可以发布的包</h4>
<div id="gMn6T" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20changed%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22gMn6T%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna changed</span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="25177b5c1f5af547e2c20f2930866867">该命令是查看当前可以发布的包，<span class="lake-fontsize-12">显示自上次relase tag以来有修改的包，输入后展示图会与下图类似：</span></p>
<p data-lake-id="cfad7ff3917f4ef614d8fa69dc4222d8" style="text-align: center"><img src="https://i.loli.net/2020/12/14/vZLXAODugqNrK2Y.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="110px" /></p>
<p data-lake-id="180490bc83301185c4f326c60419f362">如图展示，当前有三个包可以进行发布，但是如果你发布完以后再执行该命令，此处就会展示No changed packages found。</p>
<h4 id="jFxYC" data-lake-id="49b3e12a2c2710d2acd256d6d84b1dc3">2.10、发布某个项目</h4>
<div id="rbHwc" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20publish%20--dist-tag%3Dtag%E5%90%8D%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22rbHwc%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna publish <span class="cm-attribute">--dist<span class="cm-attribute">-tag<span class="cm-operator">=tag名</span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="e0aacef6659f4170b0e884d470950791">输入该命令后，会展示如下图：</p>
<p data-lake-id="f6a50c2f4d533d94c3cff81dc2a702df" style="text-align: center"><img src="https://i.loli.net/2020/12/14/8UeDy4ZrJjOC7Qc.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="189px" /></p>
<p data-lake-id="71b132a5d0b1c7fb9c63dad1a1f86a48">在上图中，控制台会让用户选择要发布的版本的版本号，最后一个选项为自定义选项。--dist-tag=tag名为发布某一个分支的包，主要用于测试或者多版本并存的情况。发布模式如下图：</p>
<p data-lake-id="4ce3de762ced0980c54f453ba3a7049c" style="text-align: center"><img src="https://i.loli.net/2020/12/14/wN4nbc3eE9FPxQd.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="383px" /></p>
<h4 id="W3Csg" data-lake-id="c4fc8b733d1516862827396aeb3fe8f0">2.11、查看diff</h4>
<div id="nW2ZT" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20diff%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22nW2ZT%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna <span class="cm-builtin">diff</span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="3ae34d927c8bd660db469ec533b2d748">作用类似git diff，主要用于<span class="lake-fontsize-12">显示自上次relase tag以来有修改的包的差异。</span></p>
<h4 id="k0n8V" data-lake-id="b2aabf72b78e424b3732be4d18dbda23">2.12、链接引用</h4>
<div id="6pryt" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22lerna%20link%22%2C%22margin%22%3Atrue%2C%22id%22%3A%226pryt%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">lerna link</span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="38a30f6d12e4a003192edf37250d4dc2">链接项目引用的库。主要用于项目包建立软链，类似 npm link。</p>
<h4 id="w8E6n" data-lake-id="f7e6cd99ca47260d5f3ef510a2b2abe8">2.13、exec</h4>
<p data-lake-id="10fbc9c93f58bea23937056edb3811d7">在每个包目录下执行任何命令。</p>
<div id="J0HSn" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22bash%22%2C%22code%22%3A%22%24%20lerna%20exec%20--%20%3Ccommand%3E%20%5B..args%5D%20%23%20runs%20the%20command%20in%20all%20packages%5Cn%24%20lerna%20exec%20--%20rm%20-rf%20.%2Fnode_modules%5Cn%24%20lerna%20exec%20--%20protractor%20conf.js%5Cn%24%20lerna%20exec%20--%20npm%20view%20%5C%5C%24LERNA_PACKAGE_NAME%5Cn%24%20lerna%20exec%20--%20node%20%5C%5C%24LERNA_ROOT_PATH%2Fscripts%2Fsome-script.js%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22J0HSn%22%7D" data-language="bash">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna exec <span class="cm-attribute">-- <command> [..args] <span class="cm-comment"># runs the command in all packages
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna exec <span class="cm-attribute">-- <span class="cm-builtin">rm <span class="cm-attribute">-rf ./node_modules
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna exec <span class="cm-attribute">-- protractor conf.js
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna exec <span class="cm-attribute">-- <span class="cm-builtin">npm view \$LERNA_PACKAGE_NAME
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-def">$ lerna exec <span class="cm-attribute">-- <span class="cm-builtin">node \$LERNA_ROOT_PATH/scripts/some-script.js</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<h3 id="1Rkhq" data-lake-id="743fcec6539789bc07863073c9fd14df">3、模式</h3>
<p data-lake-id="97ec0b2b26e4329f144213b5b30b9e85"> Lerna提供了两种管理项目的方式，一种是固定模式（Fixed mode），另一种是独立模式（Independent mode），两者区分如下：</p>
<p data-lake-id="3ac25ef55e74617bf59ef89266c3fb71">固定模式下，packages文件夹下的所有包将会公用一个版本号version（这个version就是lerna.json中的version字段），会自动将所有的包绑定到一个版本号上面，当任意一个npm包发生了更新，整个公用版本号就会发生变化。</p>
<p data-lake-id="a2e60b2790b6f666ce204e00f0d1602c">独立模式下，每个npm包都具有一个独立的版本号，在使用发布命令lerna publish命令时，可以为每个包单独的进行发布操作，同时只更新当前包的版本号，不会影响其余包的版本。在此模式下，lerna.json的version字段改为independent即可。</p>
<p data-lake-id="4c1ff7ca8106949aa5e2004b3430e538"><span class="lake-fontsize-12">lerna version 会检测从上一个版本发布以来的变动，但有一些文件的提交，我们不希望触发版本的变动，譬如 .md 文件的修改，并没有实际引起 package 逻辑的变化，不应该触发版本的变更。可以通过ignoreChanges<span class="lake-fontsize-12">配置排除，如下：</span></span></p>
<div id="PDbl3" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22json%22%2C%22code%22%3A%22%7B%5Cn%20%20%5C%22packages%5C%22%3A%20%5B%5Cn%20%20%20%20%5C%22packages%2F*%5C%22%5Cn%20%20%5D%2C%5Cn%20%20%5C%22command%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22bootstrap%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%5C%22hoist%5C%22%3A%20true%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%5C%22version%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%5C%22conventionalCommits%5C%22%3A%20true%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20%5C%22ignoreChanges%5C%22%3A%20%5B%5Cn%20%20%20%20%5C%22**%2F*.md%5C%22%5Cn%20%20%5D%2C%5Cn%20%20%5C%22version%5C%22%3A%20%5C%220.0.1-alpha.1%5C%22%5Cn%7D%22%2C%22margin%22%3Atrue%2C%22id%22%3A%22PDbl3%22%7D" data-language="json">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">{
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"packages": [
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string">"packages/*"
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> ],
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"command": {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"bootstrap": {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"hoist": <span class="cm-atom">true
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> },
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"version": {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"conventionalCommits": <span class="cm-atom">true
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> }
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> },
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"ignoreChanges": [
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-string">"**/*.md"
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> ],
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-string cm-property">"version": <span class="cm-string">"0.0.1-alpha.1"
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="6e7de78896b6450b13497ff49501d75d">效果如下：</p>
<p data-lake-id="ce58cd9029e6225cdc6daf3e1471a1bf" style="text-align: center"><img src="https://i.loli.net/2020/12/14/Z5IvyVpUrJ9skWR.png" alt="image.png" title="image.png" data-role="image" data-raw-src="" data-height="349px" class="image lake-drag-image" /></p>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-cssVar" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/10/14/cssVar/" class="article-date">
<time datetime="2020-10-14T02:50:14.000Z" itemprop="datePublished">2020-10-14</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/10/14/cssVar/">
巧妙使用CSS变量
</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="Wbycj" data-lake-id="6c916ebb5dba44cbd06ac9788708b727">一 简述CSS变量</h2>
<p data-lake-id="189b1ed8f52a152510022f95313a1514">CSS变量，首先看官方对其简述：</p>
<blockquote>
<p data-lake-id="d40260506d00b4428e2ab598f81919f2"><strong>自定义属性</strong>（有时候也被称作<strong>CSS变量</strong>或者<strong>级联变量</strong>）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： <strong><code>--main-color: black;</code></strong>），由<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/var" target="_blank">var() </a>函数来获取值（比如： <code>color: <strong>var(--main-color)</strong>;</code>）</p>
</blockquote>
<p data-lake-id="2ecbaa9aa6f9912d7f6e1a599e4ed91f">复杂的网站都会有大量的CSS代码，通常也会有许多重复的值，或者不同的地方这个值最好是可自定义，但是动画效果使用一个css动画即可。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，就需要全局搜索并且一个一个替换(手动狗头-_-)。自定义属性则是在某个地方存储一个值，然后在其他许多地方引用它。</p>
<p data-lake-id="c2e3ac715edfe4cbc9bc593d3a3f0aca">另一个好处是语义化的标识。比如，<code>--main-text-color</code> 会比 <code>#00ff00</code> 更易理解，尤其是这个颜色值在其他上下文中也被使用到。</p>
<p data-lake-id="8570e044ad0e8cd8725ed989f2e3e89e">同时自定义属性受级联的约束，并从其父级继承其值，目前浏览器支持版本列表如下：</p>
<p data-lake-id="a99afefd0bdfc9b10fdb18c5b8ca1639" align="center"><span class="lake-card-margin-top lake-card-margin-bottom lake-selected" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fpng%2F346819%2F1597800877725-c700e9f3-84a7-4ba4-8c82-020f3763bb47.png%22%2C%22originWidth%22%3A1119%2C%22originHeight%22%3A403%2C%22name%22%3A%22image.png%22%2C%22size%22%3A213207%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%7B%22x%22%3A764.8332%2C%22y%22%3A74.56964%2C%22width%22%3A24.520899999999983%2C%22height%22%3A24.520899999999983%2C%22text%22%3A%22ploupuyJojouojuo6%22%7D%2C%7B%22x%22%3A838.6254%2C%22y%22%3A83.843094%2C%22width%22%3A26.70309999999995%2C%22height%22%3A26.70309999999995%2C%22text%22%3A%22pioupuyJoJxojl%E4%B8%9A%22%7D%2C%7B%22x%22%3A1068.3962%2C%22y%22%3A90.07962%2C%22width%22%3A18.02870000000007%2C%22height%22%3A18.02870000000007%2C%22text%22%3A%22jeujenujbunswes%22%7D%2C%7B%22x%22%3A913.5748%2C%22y%22%3A91.178604%2C%22width%22%3A23.2731%2C%22height%22%3A23.2731%2C%22text%22%3A%22piojpuyjojeladoo%22%7D%2C%7B%22x%22%3A688.3952%2C%22y%22%3A96.882835%2C%22width%22%3A24.14373999999998%2C%22height%22%3A24.14373999999998%2C%22text%22%3A%22MaIAGEMPIoPUV%22%7D%2C%7B%22x%22%3A467.45407%2C%22y%22%3A99.11043%2C%22width%22%3A22.40703000000002%2C%22height%22%3A22.40703000000002%2C%22text%22%3A%22JJojdx3oueu%22%7D%2C%7B%22x%22%3A991.15356%2C%22y%22%3A129.09222%2C%22width%22%3A21.249880000000076%2C%22height%22%3A21.249880000000076%2C%22text%22%3A%22sO!uogejBs%22%7D%2C%7B%22x%22%3A244.1579%2C%22y%22%3A175.45673%2C%22width%22%3A23.47975999999997%2C%22height%22%3A23.47975999999997%2C%22text%22%3A%22owoJUO6%22%7D%2C%7B%22x%22%3A392.10327%2C%22y%22%3A184.69736%2C%22width%22%3A23.366209999999967%2C%22height%22%3A23.366209999999967%2C%22text%22%3A%22xojel%22%7D%2C%7B%22x%22%3A541.8351%2C%22y%22%3A191.2337%2C%22width%22%3A21.881939999999986%2C%22height%22%3A21.881939999999986%2C%22text%22%3A%22ejado%22%7D%2C%7B%22x%22%3A617.2749%2C%22y%22%3A192.5666%2C%22width%22%3A19.610599999999977%2C%22height%22%3A19.610599999999977%2C%22text%22%3A%22nejes%22%7D%2C%7B%22x%22%3A319.9161%2C%22y%22%3A198.67812%2C%22width%22%3A21.322400000000016%2C%22height%22%3A21.322400000000016%2C%22text%22%3A%22o6p3%22%7D%2C%7B%22x%22%3A1063.7109%2C%22y%22%3A292.47235%2C%22width%22%3A31.62869999999998%2C%22height%22%3A19.502499999999998%2C%22text%22%3A%225.0%22%7D%2C%7B%22x%22%3A464.52127%2C%22y%22%3A292.74036%2C%22width%22%3A28.418090000000007%2C%22height%22%3A18.83281999999997%2C%22text%22%3A%22No%22%7D%2C%7B%22x%22%3A917.2251%2C%22y%22%3A292.57184%2C%22width%22%3A21.52830000000006%2C%22height%22%3A19.112300000000005%2C%22text%22%3A%2236%22%7D%2C%7B%22x%22%3A768.7305%2C%22y%22%3A292.96167%2C%22width%22%3A19.403500000000008%2C%22height%22%3A19.403500000000008%2C%22text%22%3A%2249%22%7D%2C%7B%22x%22%3A989.0631%2C%22y%22%3A292.98422%2C%22width%22%3A29.571500000000015%2C%22height%22%3A18.435780000000022%2C%22text%22%3A%229.3%22%7D%2C%7B%22x%22%3A543.2404%2C%22y%22%3A293.11954%2C%22width%22%3A20.867449999999963%2C%22height%22%3A18.389980000000037%2C%22text%22%3A%2236%22%7D%2C%7B%22x%22%3A613.4382%2C%22y%22%3A292.8967%2C%22width%22%3A27.22479999999996%2C%22height%22%3A18.06909999999999%2C%22text%22%3A%229.1%22%7D%2C%7B%22x%22%3A249.05879%2C%22y%22%3A293.22565%2C%22width%22%3A20.68028000000004%2C%22height%22%3A20.68028000000004%2C%22text%22%3A%2219%22%7D%2C%7B%22x%22%3A691.1517%2C%22y%22%3A292.97067%2C%22width%22%3A23.90039999999999%2C%22height%22%3A17.56326999999999%2C%22text%22%3A%2249%22%7D%2C%7B%22x%22%3A322.53766%2C%22y%22%3A293.73746%2C%22width%22%3A21.321679999999958%2C%22height%22%3A16.65859999999998%2C%22text%22%3A%2215%22%7D%2C%7B%22x%22%3A246.61546%2C%22y%22%3A332.54788%2C%22width%22%3A22.03138999999996%2C%22height%22%3A19.374319999999955%2C%22text%22%3A%2269%22%7D%2C%7B%22x%22%3A541.1742%2C%22y%22%3A333.36868%2C%22width%22%3A24.15386000000001%2C%22height%22%3A18.108319999999992%2C%22text%22%3A%2256%22%7D%2C%7B%22x%22%3A767.21545%2C%22y%22%3A333.54272%2C%22width%22%3A23.002849999999967%2C%22height%22%3A17.02152000000001%2C%22text%22%3A%2269%22%7D%2C%7B%22x%22%3A841.7296%2C%22y%22%3A333.64755%2C%22width%22%3A22.659899999999993%2C%22height%22%3A17.100009999999997%2C%22text%22%3A%2265%22%7D%2C%7B%22x%22%3A691.5794%2C%22y%22%3A333.56595%2C%22width%22%3A24.210199999999986%2C%22height%22%3A17.019319999999993%2C%22text%22%3A%2269%22%7D%2C%7B%22x%22%3A1060.4097%2C%22y%22%3A333.56436%2C%22width%22%3A38.509500000000116%2C%22height%22%3A17.87188999999995%2C%22text%22%3A%2210.0%22%7D%2C%7B%22x%22%3A613.06464%2C%22y%22%3A333.36868%2C%22width%22%3A31.382959999999912%2C%22height%22%3A19.949160000000006%2C%22text%22%3A%2211.1%22%7D%2C%7B%22x%22%3A321.7344%2C%22y%22%3A333.90637%2C%22width%22%3A21.57035000000002%2C%22height%22%3A16.868730000000028%2C%22text%22%3A%2279%22%7D%2C%7B%22x%22%3A916.59705%2C%22y%22%3A333.90314%2C%22width%22%3A23.28615000000002%2C%22height%22%3A17.539789999999982%2C%22text%22%3A%2248%22%7D%2C%7B%22x%22%3A986.85846%2C%22y%22%3A333.4797%2C%22width%22%3A34.04483999999991%2C%22height%22%3A19.143040000000042%2C%22text%22%3A%2211.3%22%7D%2C%7B%22x%22%3A464.81793%2C%22y%22%3A334.417%2C%22width%22%3A29.31103999999999%2C%22height%22%3A17.222920000000045%2C%22text%22%3A%22No%22%7D%2C%7B%22x%22%3A8.121595%2C%22y%22%3A335.47867%2C%22width%22%3A52.668829%2C%22height%22%3A15.36685%2C%22text%22%3A%22envO%22%7D%2C%7B%22x%22%3A542.0156%2C%22y%22%3A371.83438%2C%22width%22%3A23.3125%2C%22height%22%3A19.815619999999967%2C%22text%22%3A%2236%22%7D%2C%7B%22x%22%3A614.2275%2C%22y%22%3A372.20343%2C%22width%22%3A28.27679999999998%2C%22height%22%3A19.14522999999997%2C%22text%22%3A%229.1%22%7D%2C%7B%22x%22%3A915.8988%2C%22y%22%3A372.12033%2C%22width%22%3A24.878849999999943%2C%22height%22%3A19.515269999999987%2C%22text%22%3A%2236%22%7D%2C%7B%22x%22%3A1063.5034%2C%22y%22%3A372.30795%2C%22width%22%3A31.54489999999987%2C%22height%22%3A18.81668000000002%2C%22text%22%3A%225.0%22%7D%2C%7B%22x%22%3A465.09616%2C%22y%22%3A372.86987%2C%22width%22%3A28.596159999999998%2C%22height%22%3A20.122349999999983%2C%22text%22%3A%22No%22%7D%2C%7B%22x%22%3A988.02985%2C%22y%22%3A372.41232%2C%22width%22%3A30.376549999999952%2C%22height%22%3A18.861940000000004%2C%22text%22%3A%229.3%22%7D%2C%7B%22x%22%3A6.2112346%2C%22y%22%3A377.76013%2C%22width%22%3A51.9412384%2C%22height%22%3A13.203919999999982%2C%22text%22%3A%22varO%22%7D%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22ploupuyJojouojuo6%20pioupuyJoJxojl%E4%B8%9A%20jeujenujbunswes%20piojpuyjojeladoo%20MaIAGEMPIoPUV%20JJojdx3oueu%20sO!uogejBs%20owoJUO6%20xojel%20ejado%20nejes%20o6p3%205.0%20No%2036%2049%209.3%2036%209.1%2019%2049%2015%2069%2056%2069%2065%2069%2010.0%2011.1%2079%2048%2011.3%20No%20envO%2036%209.1%2036%205.0%20No%209.3%20varO%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A1119%2C%22height%22%3A403%7D"><img src="https://i.loli.net/2020/12/14/upDBTEO1erlK6jR.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="403px" /></span></p>
<h2 id="a4ScA" data-lake-id="e89ba596ac39fdcc2a6e59618ef25246">二 CSS变量带来的变化</h2>
<p data-lake-id="1d4d7ea92b730deab346309ca2ab25c5">在高频适用该功能后，发现其功能远远不止是降低CSS开发和维护成本，最重要的是把交互的成本从JS的写法中，转移到了CSS中，使其视觉的效果更佳灵活。下面介绍几个例子来描述这一变化。</p>
<h3 id="HaE6n" data-lake-id="db99e442838b84ad2d9a05151253fb01">2.1 减少DOM节点</h3>
<h4 id="Zr5U5" data-lake-id="823c2758dc20319ee09c4fb1a0ed0e5e">例1：比例（进度）效果</h4>
<p data-lake-id="7c2e55e805f23db7e237e52a06952f7a" align="center"><span class="lake-card-margin-top lake-card-margin-bottom lake-selected" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fpng%2F346819%2F1597729659699-569226e8-3cc7-4ba2-b736-7d61d97e7bbb.png%22%2C%22originWidth%22%3A497%2C%22originHeight%22%3A391%2C%22name%22%3A%22image.png%22%2C%22size%22%3A39430%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%7B%22x%22%3A27.493502%2C%22y%22%3A36.093994%2C%22width%22%3A53.169553%2C%22height%22%3A18.873585999999996%2C%22text%22%3A%22%E8%BF%9B%E5%BA%A61%3A%22%7D%2C%7B%22x%22%3A257.31393%2C%22y%22%3A80.60208%2C%22width%22%3A30.73599999999999%2C%22height%22%3A12.543300000000002%2C%22text%22%3A%2280%25%22%7D%2C%7B%22x%22%3A28.170288%2C%22y%22%3A119.4971%2C%22width%22%3A55.076865999999995%2C%22height%22%3A17.137989999999988%2C%22text%22%3A%22%E8%BF%9B%E5%BA%A62%3A%22%7D%2C%7B%22x%22%3A192.18402%2C%22y%22%3A162.40967%2C%22width%22%3A29.240559999999988%2C%22height%22%3A12.92595%2C%22text%22%3A%2260%25%22%7D%2C%7B%22x%22%3A27.775818%2C%22y%22%3A202.01787%2C%22width%22%3A55.695291999999995%2C%22height%22%3A16.76069000000001%2C%22text%22%3A%22%E8%BF%9B%E5%BA%A63%3A%22%7D%2C%7B%22x%22%3A126.64361%2C%22y%22%3A245.29541%2C%22width%22%3A28.96767%2C%22height%22%3A12.16701999999998%2C%22text%22%3A%2240%25%22%7D%2C%7B%22x%22%3A27.50651%2C%22y%22%3A283.63794%2C%22width%22%3A57.155840000000005%2C%22height%22%3A17.687219999999968%2C%22text%22%3A%22%E8%BF%9B%E5%BA%A64%3A%22%7D%2C%7B%22x%22%3A58.42758%2C%22y%22%3A326.61353%2C%22width%22%3A30.666635000000007%2C%22height%22%3A14.153069999999957%2C%22text%22%3A%2220%25%22%7D%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%E8%BF%9B%E5%BA%A61%3A%2080%25%20%E8%BF%9B%E5%BA%A62%3A%2060%25%20%E8%BF%9B%E5%BA%A63%3A%2040%25%20%E8%BF%9B%E5%BA%A64%3A%2020%25%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A497%2C%22height%22%3A391%7D"><img src="https://i.loli.net/2020/12/14/QfIsZRcU8kB63AJ.png" alt="image.png" class="image lake-drag-image" title="image.png" data-role="image" data-raw-src="" data-height="391px" /></span></p>
<p data-lake-id="367fba70ce7700be48e7577494115a61">现有需求如上图，底层带有灰色背景色，然后内部比例（进度）需要按照比例进行展示，同时还需要在内部展示当前进度文案，颜色还要根据内部比例而变化。如果使用JS来事项该需求，会使用两层div元素，然后JS去改变里面有颜色条的宽度和颜色，同时设置进度值。但是有了CSS变量，JS所做的工作就非常简单，仅仅在容器元素上设置进度值和颜色变量即可，其他什么都不需要做，至于样式表现，或者进度值如何显示，全部都是CSS的事情。</p>
<p data-lake-id="af2ec02d1db90e54a4edbc1ad690fd3f">相关代码如下（也可点击链接直接上手体验：<a href="https://codepen.io/andyzjy/pen/MWyeQjB" target="_blank">https://codepen.io/andyzjy/pen/MWyeQjB</a>）：</p>
<div id="AkQXM" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22main%5C%22%3E%5Cn%20%20%3Cp%3E%E8%BF%9B%E5%BA%A61%20%3A%20%3C%2Fp%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22item%5C%22%20style%3D%5C%22--scale%3A%2080%3B--background%3A%20%2352c41a%5C%22%3E%3C%2Fdiv%3E%5Cn%20%20%3Cp%3E%E8%BF%9B%E5%BA%A62%20%3A%20%3C%2Fp%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22item%5C%22%20style%3D%5C%22--scale%3A%2060%3B--background%3A%20%231890ff%5C%22%3E%3C%2Fdiv%3E%5Cn%20%20%3Cp%3E%E8%BF%9B%E5%BA%A63%20%3A%20%3C%2Fp%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22item%5C%22%20style%3D%5C%22--scale%3A%2040%3B--background%3A%20%23faad14%5C%22%3E%3C%2Fdiv%3E%5Cn%20%20%3Cp%3E%E8%BF%9B%E5%BA%A64%20%3A%20%3C%2Fp%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22item%5C%22%20style%3D%5C%22--scale%3A%2020%3B--background%3A%20%23ff4d4f%5C%22%3E%3C%2Fdiv%3E%5Cn%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22AkQXM%22%2C%22autoWrap%22%3Afalse%7D" data-language="html">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"main"<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>进度1 : <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"item" <span class="cm-attribute">style=<span class="cm-string">"--scale: 80;--background: #52c41a"<span class="cm-tag cm-bracket">><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>进度2 : <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"item" <span class="cm-attribute">style=<span class="cm-string">"--scale: 60;--background: #1890ff"<span class="cm-tag cm-bracket">><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>进度3 : <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"item" <span class="cm-attribute">style=<span class="cm-string">"--scale: 40;--background: #faad14"<span class="cm-tag cm-bracket">><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>进度4 : <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"item" <span class="cm-attribute">style=<span class="cm-string">"--scale: 20;--background: #ff4d4f"<span class="cm-tag cm-bracket">><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<div id="7VRlS" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22css%22%2C%22code%22%3A%22.main%20%7B%5Cn%20%20width%3A%20400px%3B%5Cn%20%20border%3A%201px%20solid%20%23ccc%3B%5Cn%20%20border-radius%3A%207px%3B%5Cn%20%20padding%3A%208px%3B%5Cn%20%20margin%3A%2010px%20auto%3B%5Cn%7D%5Cn%5Cn.item%20%7B%5Cn%20%20height%3A%2020px%3B%5Cn%20%20width%3A%20300px%3B%5Cn%20%20background-color%3A%20%23eee%3B%5Cn%20%20margin-bottom%3A%2010px%3B%5Cn%20%20border-radius%3A%2020px%3B%5Cn%7D%5Cn%5Cn.item%3A%3Abefore%20%7B%5Cn%20%20%2F*%20%E7%94%A8%E4%BA%8E%E5%B0%86%20CSS%E8%AE%A1%E6%95%B0%E5%99%A8%20%E9%87%8D%E7%BD%AE%E4%B8%BA%E5%88%B6%E5%AE%9A%E5%80%BC%20progress%E4%BB%A3%E8%A1%A8%E8%BF%9B%E5%BA%A6%E6%9D%A1%20*%2F%5Cn%20%20counter-reset%3A%20progress%20var(--scale)%3B%5Cn%20%20%2F*%20%5Cn%20%20%5C%5C00a0%20%E8%A1%A8%E7%A4%BA%20%26nbsp%3B%20%5Cn%20%20%E8%AF%A6%E6%83%85%E8%AF%B7%E8%A7%81%3A%20https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fhtml%2Fglyphs%2F%20%5Cn%20%20PS%EF%BC%9A%E5%90%8C%E6%A0%B7%E6%98%AF%E4%B8%BA%E4%BA%86%E5%8F%B3%E4%BE%A7%E8%B7%9D%E7%A6%BB%EF%BC%8C%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%8Bpadding-left%E8%AF%95%E4%B8%80%E4%B8%8B%EF%BC%9F%5Cn%20%20*%2F%5Cn%20%20content%3A%20counter(progress)%20'%25%5C%5C00a0'%3B%5Cn%20%20width%3A%20calc(300px%20*%20var(--scale)%20%2F%20100)%3B%5Cn%20%20color%3A%20%23fff%3B%5Cn%20%20background-color%3A%20var(--background)%3B%5Cn%20%20display%3A%20block%3B%5Cn%20%20font-size%3A%2012px%3B%5Cn%20%20border-radius%3A%2020px%3B%5Cn%20%20height%3A%2020px%3B%5Cn%20%20line-height%3A%2020px%3B%5Cn%20%20text-align%3A%20right%3B%5Cn%20%20overflow%3A%20hidden%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%227VRlS%22%7D" data-language="css">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.main {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-number">400px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#ccc;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">7px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">padding: <span class="cm-number">8px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">margin: <span class="cm-number">10px <span class="cm-atom">auto;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.item {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">height: <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-number">300px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background-color: <span class="cm-atom">#eee;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">margin-bottom: <span class="cm-number">10px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.item::<span class="cm-variable-3">before {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-comment">/* 用于将 CSS计数器 重置为制定值 progress代表进度条 */
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">counter-reset: <span class="cm-atom">progress <span class="cm-atom">var(<span class="cm-variable-2">--scale);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-comment">/*
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-comment"> \00a0 表示 &nbsp;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-comment"> 详情请见: https://css-tricks.com/snippets/html/glyphs/
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-comment"> PS：同样是为了右侧距离，设置一下padding-left试一下？
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-comment"> */
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">content: <span class="cm-atom">counter(<span class="cm-atom">progress) <span class="cm-string">'%\00a0';
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-atom">calc(<span class="cm-number">300px * <span class="cm-atom">var(<span class="cm-variable-2">--scale) / <span class="cm-number">100);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">#fff;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background-color: <span class="cm-atom">var(<span class="cm-variable-2">--background);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">display: <span class="cm-atom">block;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">font-size: <span class="cm-number">12px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-radius: <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">height: <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">line-height: <span class="cm-number">20px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">text-align: <span class="cm-atom">right;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">overflow: <span class="cm-atom">hidden;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="cf0ad969e8967583f73457329e31aa1a">根据代码可看到，我们只需要一个class类，然后去设置其CSS属性即可，所有的事情都交给CSS去处理，交互和代码层面上更简明易懂（个人认为这样写起来代码感觉更舒适 ^-^）。</p>
<h4 id="zgo3p" data-lake-id="b50c4993894d968f8b30bf5abea8e3b7">例2：点击页面任意位置出现文字效果</h4>
<p data-lake-id="6125e74ffc1493357822f0f98e3f3255">点击页面任意位置都会出现所需信息。</p>
<p data-lake-id="a7124c96a8f0527a2fa649beb23a6c70" align="center"><span class="lake-card-margin-top lake-card-margin-bottom lake-selected" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fgif%2F346819%2F1597722834161-8bc82d31-4705-4c69-a3ff-2d856eec7526.gif%22%2C%22originWidth%22%3A640%2C%22originHeight%22%3A320%2C%22name%22%3A%22bodyMousedown.gif%22%2C%22size%22%3A54953%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A640%2C%22height%22%3A320%7D"><img src="https://i.loli.net/2020/12/14/K2W5y3LBGqdnHUc.gif" alt="bodyMousedown.gif" class="image lake-drag-image" title="bodyMousedown.gif" data-role="image" data-raw-src="" data-height="320px" /></span></p>
<p data-lake-id="80b55ecc1803450a49769c9009958bb4">CSS代码如下：</p>
<div id="eH1BV" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22css%22%2C%22code%22%3A%22body%3Aactive%3A%3Aafter%20%7B%5Cn%20%20transform%3A%20translate(-50%25%2C%20-100%25)%3B%5Cn%20%20opacity%3A%200.5%3B%5Cn%20%20transition%3A%200s%3B%5Cn%20%20left%3A%20-999px%3B%5Cn%7D%5Cnbody%3A%3Aafter%20%7B%5Cn%20%20content%3A%20'hi%EF%BD%9E%E6%88%91%E6%98%AF%E5%86%85%E5%AE%B9'%3B%5Cn%20%20position%3Afixed%3B%5Cn%20%20z-index%3A%20999%3B%5Cn%20%20left%3A%20calc(var(--clientx%2C%20-999)%20*%201px)%3B%5Cn%20%20top%3A%20calc(var(--clienty%2C%20-999)%20*%201px)%3B%5Cn%20%20transform%3A%20translate(-50%25%2C%20calc(-100%25%20-%2020px))%3B%5Cn%20%20opacity%3A%200%3B%5Cn%20%20transition%3A%20transform%20.3s%2C%20opacity%20.5s%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22eH1BV%22%7D" data-language="css">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-tag">body:<span class="cm-variable-3">active::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">transform: <span class="cm-atom">translate(<span class="cm-number">-50%, <span class="cm-number">-100%);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">opacity: <span class="cm-number">0.5;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">transition: <span class="cm-number">0s;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">left: <span class="cm-number">-999px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-tag">body::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">content: <span class="cm-string">'hi～我是内容';
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">position:<span class="cm-atom">fixed;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">z-index: <span class="cm-number">999;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">left: <span class="cm-atom">calc(<span class="cm-atom">var(<span class="cm-variable-2">--clientx, <span class="cm-number">-999) * <span class="cm-number">1px);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">top: <span class="cm-atom">calc(<span class="cm-atom">var(<span class="cm-variable-2">--clienty, <span class="cm-number">-999) * <span class="cm-number">1px);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">transform: <span class="cm-atom">translate(<span class="cm-number">-50%, <span class="cm-atom">calc(<span class="cm-number">-100% - <span class="cm-number">20px));
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">opacity: <span class="cm-number">0;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">transition: <span class="cm-atom">transform <span class="cm-number">.3s, <span class="cm-atom">opacity <span class="cm-number">.5s;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="388c2782b3c8315c762b50b3a04ccc59">JS代码如下：</p>
<div id="Nl4wm" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22document.addEventListener('mousedown'%2C%20function%20(event)%20%7B%5Cn%20%20var%20html%20%3D%20document.documentElement%3B%5Cn%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%80%BC%5Cn%20%20html.style.setProperty('--clientx'%2C%20event.clientX)%3B%5Cn%20%20html.style.setProperty('--clienty'%2C%20event.clientY)%3B%5Cn%7D)%3B%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22Nl4wm%22%7D" data-language="javascript">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-variable">document.<span class="cm-property">addEventListener(<span class="cm-string">'mousedown', <span class="cm-keyword">function (<span class="cm-def">event) {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-keyword">var <span class="cm-def">html <span class="cm-operator">= <span class="cm-variable">document.<span class="cm-property">documentElement;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-comment">// 设置自定义属性值
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-variable-2">html.<span class="cm-property">style.<span class="cm-property">setProperty(<span class="cm-string">'--clientx', <span class="cm-variable-2">event.<span class="cm-property">clientX);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-variable-2">html.<span class="cm-property">style.<span class="cm-property">setProperty(<span class="cm-string">'--clienty', <span class="cm-variable-2">event.<span class="cm-property">clientY);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">});</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<p data-lake-id="17c663ce8ab01788b95cd7537cd20540">从上面的代码可以看到，JS做的事情仅仅是将当前的位置信息作为变量输入到属性中，剩下的事情全部由CSS来实现。</p>
<h4 id="6VYmS" data-lake-id="407d8d943d92d253e30e5f1f9ccd440a">例3：类似Tab切换的下划线滑动</h4>
<p data-lake-id="43532ad14886bd757a57fc40e64577a0">再比如下面这种需求，也是我们经常会使用到的，目前AntD的Tabs组件切换的效果，就是一组Tab组件共用一个底部滑动条，选中当前Tab后下划线自动移动到当前Tab，尺寸还会根据当前Tab的长度而变化。如果使用纯CSS去处理的话，emmm，说实话有点烧脑而且很考验每个人的CSS功底，大多数人都会使用JS的逻辑去处理宽度和当前元素的位置来进行此效果的实现。现在，只需要一段CSS就可以搞定了，甚至文字的高亮切换都可以纯CSS搞定。</p>
<p data-lake-id="734a0ae8b0c6606db16138d7f4622f56">效果如下图：</p>
<p data-lake-id="9358e3543f95a72dd03436758aa5450c" align="center"><span class="lake-card-margin-top lake-card-margin-bottom lake-selected" data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2020%2Fgif%2F346819%2F1597732956333-e86f0c9f-b4e0-4fe1-9ef6-6e5447d861ea.gif%22%2C%22originWidth%22%3A770%2C%22originHeight%22%3A146%2C%22name%22%3A%22tab.gif%22%2C%22size%22%3A655397%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22ocrLocations%22%3A%5B%7B%22x%22%3A106.31075%2C%22y%22%3A38.495155%2C%22width%22%3A330.1284%2C%22height%22%3A21.187149000000005%2C%22text%22%3A%22%E7%A8%8D%E5%BE%AE%E9%95%BF%E7%9A%84%E5%85%83%E7%B4%A02%E6%AF%94%E4%B8%8A%E4%B8%80%E4%B8%AA%E9%95%BF%E4%B8%80%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A03%22%7D%2C%7B%22x%22%3A458.81366%2C%22y%22%3A40.90936%2C%22width%22%3A244.67093999999997%2C%22height%22%3A19.083117%2C%22text%22%3A%22%E7%89%B9%E5%88%AB%E9%95%BF%E5%B9%B6%E4%B8%94%E5%AD%97%E6%95%B0%E7%89%B9%E5%88%AB%E5%A4%9A%E7%9A%84%E5%85%83%E7%B4%A04%22%7D%2C%7B%22x%22%3A40.926994%2C%22y%22%3A41.70139%2C%22width%22%3A43.297965999999995%2C%22height%22%3A17.901779999999995%2C%22text%22%3A%22%E5%85%83%E7%B4%A01%22%7D%5D%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%E7%A8%8D%E5%BE%AE%E9%95%BF%E7%9A%84%E5%85%83%E7%B4%A02%E6%AF%94%E4%B8%8A%E4%B8%80%E4%B8%AA%E9%95%BF%E4%B8%80%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A03%20%E7%89%B9%E5%88%AB%E9%95%BF%E5%B9%B6%E4%B8%94%E5%AD%97%E6%95%B0%E7%89%B9%E5%88%AB%E5%A4%9A%E7%9A%84%E5%85%83%E7%B4%A04%20%E5%85%83%E7%B4%A01%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A770%2C%22height%22%3A146%7D"><img src="https://i.loli.net/2020/12/14/2rlnfuTwxiRIhLB.gif" alt="tab.gif" class="image lake-drag-image" title="tab.gif" data-role="image" data-raw-src="" data-height="146px" /></span></p>
<p data-lake-id="32e4d208817fd237d9199679db76ad5c">点击任意的选项卡元素，就可以看到下划线滑到对应位置，同时文字有高亮的效果。</p>
<p data-lake-id="82f3717ab021f34016942e6ad828bbbb">相关代码如下(<a href="https://codepen.io/andyzjy/pen/xxVOzZe?__cf_chl_jschl_tk__=d26ddd8143b060e0a4122276187166ba3a145da3-1597733145-0-ARe7B5or_nJxCaNDp3k0bnV7YRcGSUZbvsVyMtE4C5ot8rYp27koyF5Z7mDER6AtHL7Fpsc1DaIeIzAGWux6xC0vf_yeNwh7M5YybodpG_WiHkzb5MqP6nd2FoNiRcxkVX3gZFYwm3mIf-23ZUKFMJqBEdiGJALJ6gRj3d7mtBs4_CxmvxBTYpic32wFslSpVGdcWDrBoXUE5w4kF9D2o7aVeF7zHLdAJ5zb-WH5eyKDBEb9Fb7hgVLRoL0aWVYmUxrejBYWgk9AslWlsSg2qbYNHCn_y0Oo2lnWvzZfSVsqHW24TG00lPYLS72H0khglh8LRWeIcEkmRMrv9X2vO4Q" target="_blank">直接上手体验</a>)：</p>
<div id="fzlSp" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22tab-main%5C%22%3E%5Cn%20%20%3Cp%20class%3D%5C%22tab-item%5C%22%3E%E5%85%83%E7%B4%A01%3C%2Fp%3E%5Cn%20%20%3Cp%20class%3D%5C%22tab-item%5C%22%3E%E7%A8%8D%E5%BE%AE%E9%95%BF%E7%9A%84%E5%85%83%E7%B4%A02%3C%2Fp%3E%5Cn%20%20%3Cp%20class%3D%5C%22tab-item%5C%22%3E%E6%AF%94%E4%B8%8A%E4%B8%80%E4%B8%AA%E9%95%BF%E4%B8%80%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A03%3C%2Fp%3E%5Cn%20%20%3Cp%20class%3D%5C%22tab-item%5C%22%3E%E7%89%B9%E5%88%AB%E9%95%BF%E5%B9%B6%E4%B8%94%E5%AD%97%E6%95%B0%E7%89%B9%E5%88%AB%E5%A4%9A%E7%9A%84%E5%85%83%E7%B4%A04%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22fzlSp%22%7D" data-language="html">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"tab-main"<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"tab-item"<span class="cm-tag cm-bracket">>元素1<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"tab-item"<span class="cm-tag cm-bracket">>稍微长的元素2<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"tab-item"<span class="cm-tag cm-bracket">>比上一个长一点的元素3<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"tab-item"<span class="cm-tag cm-bracket">>特别长并且字数特别多的元素4<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">>
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<div id="SpSYf" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22css%22%2C%22code%22%3A%22.tab-main%20%7B%5Cn%20%20position%3A%20relative%3B%5Cn%20%20display%3A%20flex%3B%5Cn%20%20justify-content%3A%20space-between%3B%5Cn%20%20width%3A%20600px%3B%5Cn%20%20margin%3A%2030px%20auto%3B%5Cn%20%20border-bottom%3A%201px%20solid%20%23DDD%3B%5Cn%7D%5Cn%5Cn.tab-main%3A%3Abefore%2C%5Cn.tab-main%3A%3Aafter%20%7B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20left%3A%20calc(var(--target-left%2C%20-599)%20*%201px)%3B%5Cn%20%20color%3A%20%23096dd9%3B%5Cn%20%20width%3A%20calc(var(--target-width%2C%200)%20*%201px)%3B%5Cn%7D%5Cn%5Cn.tab-main%5Bstyle%5D%3A%3Abefore%2C%5Cn.tab-main%5Bstyle%5D%3A%3Aafter%20%7B%5Cn%20%20content%3A%20''%3B%5Cn%7D%5Cn%5Cn.tab-main%3A%3Abefore%20%7B%5Cn%20%20background-color%3A%20currentColor%3B%5Cn%20%20mix-blend-mode%3A%20overlay%3B%5Cn%7D%5Cn%5Cn.tab-main%3A%3Aafter%20%7B%5Cn%20%20border-bottom%3A%202px%20solid%3B%5Cn%20%20bottom%3A%20-2px%3B%5Cn%20%20transition%3A%20left%20.2s%2C%20width%20.2s%3B%5Cn%7D%5Cn%5Cn.tab-item%20%7B%5Cn%20%20color%3A%20rgba(0%2C%200%2C%200%2C%200.65)%3B%5Cn%20%20padding%3A%2010px%200%3B%5Cn%20%20cursor%3A%20pointer%3B%5Cn%7D%5Cn%5Cn.tab-item%3Ahover%20%7B%5Cn%20%20color%3A%20%23096dd9%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22SpSYf%22%7D" data-language="css">
<div class="lake-codeblock-content">
<div class="CodeMirror-sizer">
<pre class="cm-s-default"><span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">position: <span class="cm-atom">relative;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">display: <span class="cm-atom">flex;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">justify-content: <span class="cm-atom">space-between;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-number">600px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">margin: <span class="cm-number">30px <span class="cm-atom">auto;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-bottom: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#DDD;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-1"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main::<span class="cm-variable-3">before,
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">position: <span class="cm-atom">absolute;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">left: <span class="cm-atom">calc(<span class="cm-atom">var(<span class="cm-variable-2">--target-left, <span class="cm-number">-599) * <span class="cm-number">1px);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">#096dd9;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">width: <span class="cm-atom">calc(<span class="cm-atom">var(<span class="cm-variable-2">--target-width, <span class="cm-number">0) * <span class="cm-number">1px);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main[<span class="cm-tag">style]::<span class="cm-variable-3">before,
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main[<span class="cm-tag">style]::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">content: <span class="cm-string">'';
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main::<span class="cm-variable-3">before {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">background-color: <span class="cm-atom">currentColor;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">mix-blend-mode: <span class="cm-atom">overlay;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-main::<span class="cm-variable-3">after {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">border-bottom: <span class="cm-number">2px <span class="cm-atom">solid;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">bottom: <span class="cm-number">-2px;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">transition: <span class="cm-atom">left <span class="cm-number">.2s, <span class="cm-variable">width <span class="cm-number">.2s;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-item {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">rgba(<span class="cm-number">0, <span class="cm-number">0, <span class="cm-number">0, <span class="cm-number">0.65);
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">padding: <span class="cm-number">10px <span class="cm-number">0;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">cursor: <span class="cm-atom">pointer;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"><span class="cm-qualifier">.tab-item:<span class="cm-variable-3">hover {
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content"> <span class="cm-property">color: <span class="cm-atom">#096dd9;
<span class="lake-preview-line"><span class="lake-preview-line-number lake-lm-pad-level-0"><span class="lake-preview-codeblock-content">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
</div>
</div>
<div id="qYMEj" class="lake-card-margin lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22document.addEventListener('mousedown'%2C%20function%20(event)%20%7B%5Cn%20%20var%20target%20%3D%20event.target%3B%5Cn%20%20target.parentElement.style.setProperty('--target-width'%2C%20target.clientWidth)%3B%5Cn%20%20target.parentElement.style.setProperty('--target-height'%2C%20target.clientHeight)%3B%5Cn%20%20target.parentElement.style.setProperty('--target-left'%2C%20target.offsetLeft)%3B%5Cn%7D)%3B%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22qYMEj%22%7D" data-language="javascript">
<div class="lake-codeblock-content">