引用了yo框架中的_border.scss(用来获取yo框架封装的border)   以及   variables.scss(用来获取媒体查询的规则)

 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)
// 为边框位置提供定位参考
position: relative; if $border-width == null
$border-width: 0; border-radius: $radius; &::after
// 用以解决边框layer遮盖内容
pointer-events: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
// fix当元素宽度出现小数时,边框可能显示不全的问题
// overflow: hidden;
content: "\0020";
border-color: $border-color;
border-style: $border-style;
border-width: $border-width; // 适配dpr进行缩放
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49),
       (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
width: 100%;
height: 100%;
if $radius != null {
border-radius: $radius;
} @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
         (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
         (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
        (min-resolution: 144dpi) and (max-resolution: 239dpi),
        (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
width: 200%;
height: 200%;
transform: scale(.5)
if $radius != null {
border-radius: $radius * 2;
} @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),
         (min-device-pixel-ratio: 2.5),(min-resolution: 240dpi),(min-resolution: 2.5dppx)
width: 300%;
height: 300%;
transform: scale(.33333)
if $radius != null {
border-radius: $radius * 3;
} transform-origin: 0 0;

省略点ellipsis的解决方案(支持多行)

 wrap($is-wrap = true)
if $is-wrap == true
word-wrap: break-word;
word-break: break-all;
else
white-space: nowrap; ellipsis($width = null, $line-clamp = 1)
overflow: hidden;
text-overflow: ellipsis;
width: $width;
if abs($line-clamp) > 1
// 要使得多行截取生效,display的值只能为-webkit-box
display: -webkit-box !important;
-webkit-line-clamp: $line-clamp;
flex-direction column
wrap()
else
wrap(false)

将上述代码放入styl文件中,就可以直接使用!

最新文章

  1. Window.focus()让页面成为当前窗体
  2. Mysql数据库主从心得整理
  3. JS Date
  4. Qt之Qprocess
  5. 线程安全、数据同步之 synchronized 与 Lock
  6. HOLOLENS如何调节屏幕亮度和音量?
  7. Zend Guard Loader/Zend Loader是干什么的
  8. js不是从上到下执行的吗?
  9. .net泛型理解
  10. js中的SetTimeOut
  11. Java 的zip压缩和解压缩
  12. go实现排序的链表
  13. hdu_5919_Sequence II(主席树)
  14. (转)fiddler实现手机抓包的基础设置问题
  15. 201521123048 《Java程序设计》第4周学习总结
  16. MySQL数据库基础(二)(约束以及修改数据表)
  17. vue中数据添加完成以后,数据回显
  18. jQuery UI弹出新窗体
  19. ssm登录与退出
  20. Java 日期时间获取和显示

热门文章

  1. 各个领域常见的一些bug汇总
  2. 理解linux安装软件
  3. 在win10下改变默认的输入法切换Ctrl+Space
  4. POJ2777 Count Color 线段树区间更新
  5. Linux/CentOS各种服务框架的搭建完整流程
  6. Hilbert曲线简单介绍及生成算法
  7. luogu3225 [HNOI2012]矿场搭建
  8. maven工程读取resource下配置文件
  9. 【.NET】C#中遍历各类数据集合的方法
  10. 深度学习必备:随机梯度下降(SGD)优化算法及可视化