button的字体默认不继承父元素，添加reset

  1. button {
  2.   font: inherit;
  3. }

scss中用&代表自己

  1. .tag {
  2.   &.selected {
  3.     color: red;
  4.   }
  5. }

去除input选中时的边框

  1. :focus {
  2.   outline: none;
  3. }

等宽字体

  1. font-family: Consolas, monospace;

按钮布局

image.png
OK按钮float: right, 其他按钮float: left;

  1. .buttons {
  2.   > button {
  3.     width: 25%;
  4.     height: 64px;
  5.     float: left;
  6.   }
  7.   .OK {
  8.     height: 64*2px;
  9.     float: right;
  10.   }
  11.   .zero {
  12.     width: 50%;
  13.   }
  14. }

给按钮添加背景色

  1. button {
  2.   &:nth-child(1){
  3.     background: $bg;
  4.   }
  5.   &:nth-child(2), &:nth-child(5) {
  6.     background: darken($bg, 4%);
  7.   }
  8.   &:nth-child(3), &:nth-child(6), &:nth-child(9) {
  9.     background: darken($bg, 4*2%);
  10.   }
  11.   &:nth-child(4), &:nth-child(7), &:nth-child(10), &:nth-child(13) {
  12.     background: darken($bg, 4*3%);
  13.   }
  14.   &:nth-child(8), &:nth-child(11){
  15.     background: darken($bg, 4*4%);
  16.   }
  17.   &:nth-child(14) {
  18.     background: darken($bg, 4*5%);
  19.   }
  20.   &:nth-child(12) {
  21.     background: darken($bg, 4*6%);
  22.   }
  24.   // 点击时背景色
  25.   &:active {
  26.     background: #fff;
  27.   }
  28. }

实现上下内阴影

  1.   box-shadow: inset 0 -5px 5px -5px fade-out(black, 0.6),
  2.               inset 0 5px 5px -5px fade-out(black, 0.6);

在money组件给layout组件加css

思路：money组件给layout传一个classPrefix的prop, layout的每个元素都可以使用这个classPrefix组成一个class名
image.png
money添加多一个style元素，去掉scoped, 给这个class设置css样式
image.png
让元素从下往上排列，使用flex-direction: column-reverse;