====== SCSS / SASS ======

{{tag>frontend css}}

===== Tricks =====

==== 固定表格宽度 ====

用此mixins可按设定宽度固定表格的宽度，具体布局原理详见[[frontend:html#Table|表格布局原理]]

<code css _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);
    }
  }
}
</code>

==== AutoPrefix ====

以下是为一些不会被[[https://github.com/postcss/autoprefixer|autoprefixer]]覆盖的CSS属性[(cite:>[[https://github.com/postcss/autoprefixer/issues/167|不是web标准属性，不会被autoprefix]])]自动添加浏览器前缀的mixin：

<code css _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 */
}
</code>

==== CSS实现折行 ====

From [[https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_text-overflow.scss|Bootstrap sass]]

<code css text-overflow.scss>
/*
 * Text overflow
 * Requires inline-block or block for proper styling
 */

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</code>