style.sass 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // ===主题色(红)
  2. $theme_color: #ef4040
  3. // ===辅色(红)
  4. $theme_fu_red: #f47979
  5. // ===辅色(橙色)
  6. $theme_fu_org: #f99630
  7. // ===辅色(蓝色)
  8. $theme_fu_bule: #4488eb
  9. // ===辅色(深灰1)
  10. $theme_gray333: #333
  11. // ===辅色(深灰2)
  12. $theme_gray666: #666
  13. // ===辅色(灰1)
  14. $theme_gray999: #999
  15. // ===辅色(展位提示)
  16. $theme_graybbb: #bbb
  17. // ===辅色(边框)
  18. $theme_grayddd: #ddd
  19. // ===辅色(用于背景色)
  20. $theme_grayf0: #f0f0f0
  21. // ===底部背景(用于背景色)
  22. $theme_footer: #171D31
  23. //定位上下左右居中
  24. @mixin center
  25. position: absolute
  26. top: 50%
  27. left: 50%
  28. transform: translate(-50%, -50%)
  29. // 背景图片地址和大小
  30. @mixin bis($url)
  31. background-image: url($url)
  32. background-repeat: no-repeat
  33. background-size: 100% 100%
  34. //定位全屏
  35. @mixin allcover
  36. position:absolute
  37. top: 0
  38. right: 0
  39. //宽高
  40. @mixin wh($width, $height)
  41. width: $width
  42. height: $height
  43. //字体大小,颜色
  44. @mixin sc($size, $color)
  45. font-size: $size
  46. color: $color
  47. //字体大小、行高、字体
  48. @mixin font($size, $line-height, $family: 'Microsoft YaHei')
  49. font: $size/$line-height $family
  50. //定位上下居中
  51. @mixin ct
  52. position: absolute
  53. top: 50%
  54. transform: translateY(-50%)
  55. //定位左右居中
  56. @mixin cl
  57. position: absolute
  58. left: 50%
  59. transform: translateX(-50%)