常用css代碼(scss mixin)

溢出顯示省略號

參過參數可以只是單/多行.

/** * 溢出省略號 * @param {Number} 行數 */ @mixin ellipsis($rowCount: 1) { @if $rowCount <=1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $rowCount; -webkit-box-orient: vertical; } }

真.1px邊框

移動端由於像素密度比的問題, 實際的1px邊框看起來比較粗, 如果想要更"細"可以使用下面的代碼. 不同像素密度比的設備都可以兼容(pc/手機), 還支持任意數量圓角.

/** * 真.1px邊框 * {List}: 多個方向邊框, 默認值為bottom, 你可以根據需要傳入(top, left, bottom, right) 4個方向; * {Color} 邊框的顏色, 默認#ccc; * {List} 4個圓角半徑, 默認0; * {String} 一個高級設置, 一般都不需要改動, 由於細邊框的實現使用了css的偽類, 所以為了規避可能出現的樣式沖突, 我們可以自己指定使用:after還是:before, 默認after; */ @mixin thinBorder( $directionMaps: bottom, $color: #ccc, $radius: ( 0, 0, 0, 0 ), $position: after ) { // 是否只有一個方向  $isOnlyOneDir: string==type-of($directionMaps); @if ($isOnlyOneDir) { $directionMaps: ($directionMaps); } @each $directionMap in $directionMaps { border-#{$directionMap}: 1px solid $color; } // 判斷圓角是list還是number  @if (list==type-of($radius)) { border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); } @else { border-radius: $radius; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { & { position: relative; // 刪除1像素密度比下的邊框 @each $directionMap in $directionMaps { border-#{$directionMap}: none; } } &:#{$position} { content: ""; position: absolute; top: 0; left: 0; display: block; width: 200%; height: 200%; transform: scale(0.5); box-sizing: border-box; padding: 1px; transform-origin: 0 0; pointer-events: none; border: 0 solid $color; @each $directionMap in $directionMaps { border-#{$directionMap}-width: 1px; } // 判斷圓角是list還是number  @if (list==type-of($radius)) { border-radius: nth($radius, 1) * 2 nth($radius, 2) * 2 nth($radius, 3) * 2 nth($radius, 4) * 2; } @else { border-radius: $radius * 2; } } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { &:#{$position} { // 判斷圓角是list還是number  @if (list==type-of($radius)) { border-radius: nth($radius, 1) * 3 nth($radius, 2) * 3 nth($radius, 3) * 3 nth($radius, 4) * 3; } @else { border-radius: $radius * 3; } width: 300%; height: 300%; transform: scale(0.3333); } } }

等邊三角形

常用來做下拉菜單的方向指示, 如果你做的頁面就是個簡單的活動頁, 引入"餓了么"一類的ui就有些大材小用了, 借助"三角形"你可以自己做一個簡單的.

/** * 等邊三角形 * @param {String} 尺寸 * @param {Color} 顏色 * @param {String} 方向 */ @mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) { width: 0; height: 0; border-style: solid; @if (bottom==$dir) { border-width: $size $size 0 $size; border-color: $color transparent transparent transparent; } @else if (top==$dir) { border-width: 0 $size $size $size; border-color: transparent transparent $color transparent; } @else if (right==$dir) { border-width: $size 0 $size $size; border-color: transparent transparent transparent $color; } @else if (left==$dir) { border-width: $size $size $size 0; border-color: transparent $color transparent transparent; } }

loading

 

這是一個"半圓邊框"旋轉的loading, 你可以根據業務需求自己指定圓的半徑.

@mixin loading-half-circle($width: 1em) { display: inline-block; height: $width; width: $width; border-radius: $width; border-style: solid; border-width: $width/10; border-color: transparent currentColor transparent transparent; animation: rotate 0.6s linear infinite; vertical-align: middle; }

作者：愛前端不愛戀愛
鏈接：https://zhuanlan.zhihu.com/p/93467575
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。