Vue仿京东金融页面-css样式封装

1.新建两个Sass文件,element.scss和layout.scss

2.element.scss

1. @import "./layout.scss";
2.  
3. @mixin btn($size:14px,$color:#fff,$bgcolor:#F04752,$padding:5px,$radius:5px) {
4.   padding: $padding;
5.   background-color: $bgcolor;
6.   border-radius: $radius;
7.   border: 1px solid $bgcolor;
8.   font-size: $size;
9.   color: $color;
10.   text-align: center;
11.   line-height: 1;
12.   display: inline-block;
13. }
14.  
15. @mixin list($direction:column) {
16.   @include flex($direction);
17. }
18.  
19. @mixin panel($bgcolor:#fff,$padding:0,$margin:20px 0,$height:112px,$txtPadding:0 32px,$color:#333,$fontSize:32px) {
20.   background: $bgcolor;
21.   padding: $padding;
22.   margin: $margin;
23.   >h4{
24.     height: $height;
25.     line-height: $height;
26.     padding: $txtPadding;
27.     text-overflow: ellipsis;
28.     white-space: nowrap;
29.     overflow: hidden;
30.     text-align: center;
31.     color: $color;
32.     font-size: $fontSize
33.   }
34. }

3.layout.css

1. @charset "UTF-8";
2.  
3. @mixin flex($direction:column,$inline:block) {
4.   display: if($inline==block,flex,inline-flex);
5.   flex-direction: $direction;
6.   flex-wrap: wrap;
7. }