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