用户工具

站点工具


frontend:scss

SCSS / SASS

Tricks

固定表格宽度

用此mixins可按设定宽度固定表格的宽度,具体布局原理详见表格布局原理

_table-width.scss
/**
 * Fix table width
 *
 * Usage:
 * ```scss
 * .table {
 *   @include table-width(60px 120px 60px initial 30em 50rem);
 * }
 * ```
 */
@mixin table-width($table-cell-width) {
  @for $i from 1 through length($table-cell-width) {
    th:nth-child(#{length($table-cell-width)}n+#{$i}) {
      width: nth($table-cell-width, $i);
    }
  }
}

AutoPrefix

以下是为一些不会被autoprefixer覆盖的CSS属性[(cite:>不是web标准属性,不会被autoprefix)]自动添加浏览器前缀的mixin:

_prefix.scss
/* autoprefixer will not auto prefix user-select */
@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select; /* IE10+ */
  user-select: $select;
}
 
@mixin placeholder($color) {
  /* Firefox */
  &::-moz-placeholder {
    color: $color;
    opacity: 1; /* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 */
  }
  &:-ms-input-placeholder { color: $color; } /* Internet Explorer 10+ */
  &::-webkit-input-placeholder  { color: $color; } /* Safari and Chrome */
}

CSS实现折行

From Bootstrap sass

text-overflow.scss
/*
 * Text overflow
 * Requires inline-block or block for proper styling
 */
 
@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
frontend/scss.txt · 最后更改: 2023/12/03 10:24 由 127.0.0.1