web前端入门到实战：常用的5个css代码

1、web前端入门到实战：常用的5个css代码封装成mixin复用在写css的时候, 无数样式都是很常用但是写起来很棘手, 虽然现在有无数成熟的ui框架, 但是我们也不能一个容易的活动页也引入那么大个框架吧?在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 选择了5个共享给大家, 希翼大家喜爱.溢出显示省略号参过参数可以只是单/多行./* 溢出省略号* param number 行数*/mixin ellipsis($rowcount: 1) if $rowcount <=1 overflow: hidden;text-overflow: ellipsis;white-spa

2、ce: nowrap; else min-width: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: $rowcount;-webkit-box-orient: vertical;真.1px边框移动端因为像素密度比的问题, 实际的1px边框看起来比较粗, 假如想要更&quot;细&quot;可以用法下面的代码. 不同像素密度比的设备都可以兼容(pc/手机), 还支持随意数量圆角./* 真.1px边框* list: 多个方向边框, 默认值为bottom, 你可

3、以按照需要传入(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=

4、type-of($directionmaps);if ($isonlyonedir) $directionmaps: ($directionmaps);each $directionmap in $directionmaps border-$directionmap: 1px solid $color;/ 推断圆角是list还是numberif (list=type-of($radius) border-radius: nth($radius, 1)nth($radius, 2)nth($radius, 3)nth($radius, 4); else border-radius: $radiu

5、s;media only screen and (-webkit-min-device-pixel-ratio: 2) &amp; position: relative;/ 删除1像素密度比下的边框each $directionmap in $directionmaps border-$directionmap: none;&amp;:$position content: &quot;&quot;position: absolute;top: 0;left: 0;display: block;width: 200%;height: 200%;transform:

6、 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还是numberif (list=type-of($radius) border-radius: nth($radius, 1) *2nth($radius, 2) *2nth($radius, 3) *2nth

7、($radius, 4) *2; else border-radius: $radius * 2;media only screen and (-webkit-min-device-pixel-ratio: 3) &amp;:$position / 推断圆角是list还是numberif (list=type-of($radius) border-radius: nth($radius, 1) *3nth($radius, 2) *3nth($radius, 3) *3nth($radius, 4) *3; else border-radius: $radius * 3;width:

8、300%;height: 300%;transform: scale(0.3333);等边三角形常用来做下拉菜单的方向指示, 假如你做的页面就是个容易的活动页, 引入&quot;饿了么&quot;一类的ui就有些大材小用了, 借助&quot;三角形&quot;你可以自己做一个容易的./* 等边三角形* param string 尺寸* param color 色彩* param string 方向*/mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) width: 0;heig

9、ht: 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

10、;border-color: transparent transparent transparent $color; else if (left=$dir) border-width: $size $size $size 0;border-color: transparent $color transparent transparent;loading这是一个&quot;半圆边框&quot;旋转的loading, 你可以按照业务需求自己指定圆的半径.mixin loading-half-circle($width: 1em) display: inline-block;heig

11、ht: $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 背景色*/mixin bgchessboard($color: aaa) background-image: linear-gradient(45deg,$color 25%,transparent 25%,transparent 75%,