mixin.less 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @blue: #3190e8;
  2. @bc: #e4e4e4;
  3. @fc:#fff;
  4. // 背景图片地址和大小
  5. .bis(@url) {
  6. background-image: url(@url);
  7. background-repeat: no-repeat;
  8. background-size: 100% 100%;
  9. }
  10. //定位全屏
  11. .allcover{
  12. position:absolute;
  13. top:0;
  14. right:0;
  15. }
  16. //transform上下左右居中
  17. .ctt {
  18. position: absolute;
  19. top: 50%;
  20. left: 50%;
  21. transform: translate(-50%, -50%);
  22. }
  23. //定位上下左右居中
  24. .ctp(@width, @height) {
  25. position: absolute;
  26. top: 50%;
  27. left: 50%;
  28. margin-top: -@height/2;
  29. margin-left: -@width/2;
  30. }
  31. //定位上下居中
  32. .tb {
  33. position: absolute;
  34. top: 50%;
  35. transform: translateY(-50%);
  36. }
  37. //定位左右居中
  38. .lr {
  39. position: absolute;
  40. left: 50%;
  41. transform: translateX(-50%);
  42. }
  43. //宽高
  44. .wh(@width, @height){
  45. width: @width;
  46. height: @height;
  47. }
  48. //字体大小、行高、字体
  49. .ft(@size, @line-height) {
  50. font-size: @size;
  51. line-height:@line-height;
  52. }
  53. //字体大小,颜色
  54. .sc(@size, @color){
  55. font-size: @size;
  56. color: @color;
  57. }
  58. //flex 布局和 子元素 对其方式
  59. .fj(@type: space-between){
  60. display: flex;
  61. justify-content: @type;
  62. }