mixin.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @mixin clearfix {
  2. &:after {
  3. content: "";
  4. display: table;
  5. clear: both;
  6. }
  7. }
  8. @mixin height($h:0,$lh:$h) {
  9. height: $h;
  10. line-height: $lh;
  11. }
  12. @mixin flex($dir:row,$justify:space-between,$align:center){
  13. display:flex;
  14. flex-direction: $dir;
  15. justify-content:$justify;
  16. align-items:$align;
  17. }
  18. @mixin scrollBar {
  19. &::-webkit-scrollbar-track-piece {
  20. background: #d3dce6;
  21. }
  22. &::-webkit-scrollbar {
  23. width: 6px;
  24. }
  25. &::-webkit-scrollbar-thumb {
  26. background: #99a9bf;
  27. border-radius: 20px;
  28. }
  29. }
  30. @mixin relative {
  31. position: relative;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. @mixin pct($pct) {
  36. width: #{$pct};
  37. position: relative;
  38. margin: 0 auto;
  39. }
  40. @mixin triangle($width, $height, $color, $direction) {
  41. $width: $width/2;
  42. $color-border-style: $height solid $color;
  43. $transparent-border-style: $width solid transparent;
  44. height: 0;
  45. width: 0;
  46. @if $direction==up {
  47. border-bottom: $color-border-style;
  48. border-left: $transparent-border-style;
  49. border-right: $transparent-border-style;
  50. }
  51. @else if $direction==right {
  52. border-left: $color-border-style;
  53. border-top: $transparent-border-style;
  54. border-bottom: $transparent-border-style;
  55. }
  56. @else if $direction==down {
  57. border-top: $color-border-style;
  58. border-left: $transparent-border-style;
  59. border-right: $transparent-border-style;
  60. }
  61. @else if $direction==left {
  62. border-right: $color-border-style;
  63. border-top: $transparent-border-style;
  64. border-bottom: $transparent-border-style;
  65. }
  66. }