常用的 CSS 片段

文本截断

element {
  display: inline-block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

隐藏文字

element {
  font: 0/0 a;
  color: transparent;
  text-indent: -9999px;
}

SCSS 片段

/* @params $block 为模块名称（最高作用域）
---------------------------- */
@mixin block($block) {
  $B: $block !global;
  .#{$block} {
    $rootblock: & !global;
    @content;
  }
}

/* 全局样式，自动增加 global- 前缀，以更好的区分样式类型
---------------------------- */
@mixin global($name) {
  $cls: global-#{$name};
  @at-root .#{$cls} {
    @content;
  }
}

@mixin icon($w, $h, $bg, $type: 'png') {
  width: #{$w}px;
  height: #{$h}px;
  background: none no-repeat center / 100%;
  @if $type == 'svg' {
    background-image: url('#{$bg}.svg');
  } @else {
    background-image: url('#{$bg}@2x.png');
    @media (min-resolution: 3dppx) {
      background-image: url('#{$bg}@3x.png');
    }
  }
}

@mixin one-pix-line($pos: 'bottom', $color: $--border-color, $style: solid) {
  $prop: border-#{$pos};
  @if $pos == 'all' {
    $prop: border;
  }
  #{$prop}: 1px $style $color;
  @media (min-resolution: 2dppx) {
    #{$prop}: .5px $style $color;
  }
  @media (min-resolution: 3dppx) {
    #{$prop}: .333333px $style $color;
  }
  @media (min-resolution: 4dppx) {
    #{$prop}: .25px $style $color;
  }
}

/* @include positon($t: 0); => position: absolute; top: 0;
/* @include positon($t: 0, $l: 100%); => position: absolute; top: 0; left: 100%;
/* @include positon($v: 0); => position: absolute; top: 0; right: 0; bottom: 0; left: 0;
---------------------------- */
@mixin position($p: absolute, $t: null, $r: null, $b: null, $l: null, $v: null) {
  $t: $v or $t;
  $r: $v or $r;
  $b: $v or $b;
  $l: $v or $l;
  position: $p;
  @if $t { top: $t; }
  @if $r { right: $r; }
  @if $b { bottom: $b; }
  @if $l { left: $l; }
}

@mixin text-ellipsis($width: 100%) {
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

@mixin text-wrap() {
  white-space: pre-wrap;
  word-wrap: break-word;
}

@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @content;
}

@mixin box-center {
  @include flex-box;
  align-items: center;
  justify-content: center;
  @content;
}