mixins.scss 913 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. @mixin ellipsis {
  2. overflow: hidden;
  3. white-space: nowrap;
  4. text-overflow: ellipsis;
  5. }
  6. //flex布局复用
  7. @mixin flex($hov:space-between,$col:center){
  8. display:flex;
  9. justify-content:$hov;
  10. align-items:$col;
  11. }
  12. @mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  13. display:inline-block;
  14. width:$w;
  15. height:$h;
  16. // background:url($img) no-repeat center;
  17. background-size:$size;
  18. }
  19. @mixin position($pos:absolute,$top:0,$left:0,$w:100%,$h:100%){
  20. position:$pos;
  21. top:$top;
  22. left:$left;
  23. width:$w;
  24. height:$h;
  25. }
  26. @mixin positionImg($pos:absolute,$top:0,$right:0,$w:0,$h:0,$img:''){
  27. position:$pos;
  28. top:$top;
  29. right:$right;
  30. width:$w;
  31. height:$h;
  32. background:url($img) no-repeat center;
  33. background-size:contain;
  34. }
  35. @mixin height($h:0,$lh:$h) {
  36. height: $h;
  37. line-height: $lh;
  38. }
  39. @mixin wH($w:0,$h:0) {
  40. width:$w;
  41. height: $h;
  42. }
  43. @mixin border($bw:1px,$bc:$colorF,$bs:solid) {
  44. border: $bw $bs $bc;
  45. }