工作中Sass常用混合器总结

背景图片

@mixin background($url, $size: cover) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: $size;
}

字体

@mixin font($size, $color, $align: left, $bold: normal) {
  font-size: $size;
  color: $color;
  text-align: $align;
  font-weight: $bold;
}

flex布局

@mixin flex($align:center, $justify:center, $direction:row) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $direction;
}

文字单行省略

@mixin ellipsi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

文字多行省略

@mixin ellipsis($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

媒体查询

@use 'sass:map';

$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
  '2xl': 1536px
);

@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (max-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Breakpoint max: '#{$breakpoint}' not a breakpoint";
  }
}