今天小编跟大家讲解下有关常用的5个css代码(scss mixin) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关常用的5个css代码(scss mixin) 的相关资料，希望小伙伴们看了有所帮助。
封装成mixin复用在写css的时候, 很多样式都是很常用但是写起来很麻烦, 虽然现在有很多成熟的ui框架, 但是我们也不能一个简单的活动页也引入那么大个框架吧?
在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了5个分享给大家, 希望大家喜欢.
做一名合格的"CV"工程师,"复制/粘贴"一把梭溢出显示省略号参过参数可以只是单/多行.
/*** 溢出省略号* @param {Number} [email protected] 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;[email protected] 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} [email protected] 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;}棋盘如果你做一些界面生成器工具(类易企秀)你会用到.
/*** 棋盘背景* @param {Color} [email protected] bgChessboard($color: #aaa) { background-image: linear-gradient( 45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color ), linear-gradient( 45deg, $color 26%, transparent 26%, transparent 74%, $color 74%, $color ); background-size: 10vw 10vw; background-position: 0 0, 5vw 5vw;}总结上面的代码我放github了, 源码:https://github.com/any86/
来源：爱蒂网
