以下内容为本人项目开发中积累的一些常用方法，有需要的小伙伴们Get走

自定义字体(font-face)

本方法需要准备字体格式(.eot、.woff2、.woff、.ttf、.svg)，所需格式可从第三方网站转化

Less版本
*****************************
@font-url: '../fonts'; //设置字体存放目录
.font-face(@font-name){@font-face{font-family: '@{font-name}';src: url('@{font-url}/@{font-name}.eot'); /* IE9 Compat Modes */src: url('@{font-url}/@{font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('@{font-url}/@{font-name}.woff2') format('woff2'),url('@{font-url}/@{font-name}.woff') format('woff'), /* Modern Browsers */url('@{font-url}/@{font-name}.ttf')  format('truetype'), /* Safari, Android, iOS */url('@{font-url}/@{font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */font-weight: normal;font-style: normal;}
}Sass版本
*****************************
$font-url: '../fonts'; //设置字体存放目录
@mixin font-face($font-name){@font-face{font-family: '#{$font-name}';src: url('#{$font-url}/#{$font-name}.eot'); /* IE9 Compat Modes */src: url('#{$font-url}/#{$font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('#{$font-url}/#{$font-name}.woff2') format('woff2'),url('#{$font-url}/#{$font-name}.woff') format('woff'), /* Modern Browsers */url('#{$font-url}/#{$font-name}.ttf')  format('truetype'), /* Safari, Android, iOS */url('#{$font-url}/#{$font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */font-weight: normal;font-style: normal;}
}

文本截取

单行文本
该方法使用时需要有具体的宽度，否则文本截取无效果

Less版本
*****************************
.text-overflow(){white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}Sass版本
*****************************
@mixin text-overflow{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}

多行文本，默认截取2行

Less版本
*****************************
.text-xline(@line: 2){text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: @line; -webkit-box-orient: vertical;
}Sass版本
*****************************
@mixin text-xline($line: 2){text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical;
}

设置透明度

该方法主要是为了兼容低版本IE浏览器免写filter专为懒人准备
默认透明度为80%

Less版本
*****************************
.opacity(@opacity: 80) {opacity: @opacity / 100;filter: ~"alpha(opacity=@{opacity})";
}Sass版本
*****************************
@mixin opacity($opacity: 80) {opacity: $opacity / 100;filter: alpha(opacity=#{$opacity});
}

设置透明背景色

//* 注意！
//:root &{
// * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除
// * \9 代表 IE9 以下浏览器支持
// * :root 只有 IE9+ 以及其他现代浏览器支持
// * IE10 以上不再支持 filter
// * & 代表选择器,如：:root .demo{ filter:none;}
//
// filter:none;
//}
//*

Less版本
*****************************
.background-rgba(@red, @green, @blue, @alpha: 1){@color:rgba(@red,@green,@blue,@alpha);@filtercolor:argb(@color);background-color: @color;-ms-filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
}Sass版本
*****************************
@mixin background-rgba($red, $green, $blue, $alpha: 1){$color:rgba($red,$green,$blue,$alpha);$filtercolor:rgb($red,$green,$blue);background-color: $color;-ms-filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$filtercolor}',endColorstr='#{$filtercolor}');filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$filtercolor}',endColorstr='#{$filtercolor}');
}

设置三角形

该方法是使用纯CSS实现各种形状的三角形，主要用于pop文本框(气泡)，示例图：

如选在 :before和:after上面使用需自行设置content:''

Less版本
*****************************
.triangle(top, @width :5px, @color: #ccc){width: 0; height: 0; font-size:0; line-height: 0;border-style:solid dashed dashed dashed;border-color:@color transparent transparent transparent;border-width:@width;
}
.triangle(right, @width :5px, @color: #ccc){width: 0; height: 0; font-size:0; line-height: 0;border-style:dashed solid dashed dashed;border-color:transparent @color transparent transparent;border-width:@width;
}
.triangle(bottom, @width :5px, @color: #ccc){width: 0; height: 0; font-size:0; line-height: 0;border-style:dashed dashed solid dashed;border-color:transparent transparent @color transparent;border-width:@width;
}
.triangle(left, @width :5px, @color: #ccc){width: 0; height: 0; font-size:0; line-height: 0;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent @color;border-width:@width;
}
.triangle(@_, @width :5px, @color: #ccc){.triangle-compatible();
}
//边框附加内容
.triangle-compatible(){width: 0; height: 0; overflow:hidden;
}Sass版本
*****************************
@mixin border-triangle ($dir, $width: 5px, $color: #000){@if $dir == top{width: 0; height: 0; font-size:0; line-height: 0; border-width:$width;border-style:solid dashed dashed dashed;border-color:$color transparent transparent transparent;}@else if $dir == right {width: 0; height: 0; font-size:0; line-height: 0; border-width:$width;border-style:dashed solid dashed dashed;border-color:transparent $color transparent transparent;}@else if $dir == bottom {width: 0; height: 0; font-size:0; line-height: 0; border-width:$width;border-style:dashed dashed solid dashed;border-color:transparent transparent $color transparent;}@else if $dir == left {width: 0; height: 0; font-size:0; line-height: 0; border-width:$width;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent $color;}
}

使用方法

书写.less或者.sass文件时，在文件起始位置引入单独的公共文件或者方法，具体如下：

Less版本
*****************************
//引入公共变量和公共方法
@import "less_os.less";Sass版本
*****************************
//引入公共变量和公共方法
@import "sass_os";

书写具体样式的时候直接引入即可，具体如下：

以下以多行文本截取为例：<div class="text">我是一段多行文本内容，看看截取效果怎么样吧。我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊。</div>Less版本
*****************************
.text{
width:200px; height:60px; .text-xline();
}
// 设置截取2行文本(方法内部默认值为2)Sass版本
*****************************
.text{
width:200px; height:60px; @mixin text-xline(3);
}
// 设置截取3行文本

方法括号内为参数，可携带无限个参数，参数和默认值使用:分隔，如果不传值这使用默认设置

本文未完待续…

Less/Sass 定制私人常用方法库相关推荐

在CRM定制中常用的Javascript
CRM Client Programming Tips 前段时间一直在做CRM4.0的相关开发,其中大多数都是在做Customization和工作流,其实CRM的开发本来大多都是Customizati ...
Typora主题定制及常用配置的设置方法
写在前面基本配置自动保存取消检查更新开启数学支持和HTML支持代码插入快捷键设置主题设置后记写在前面 Typora作为跨平台的优秀开源markdown编辑器,具有上手容易,操作简单等 ...
calendR ：为你定制私人专属日历
作者 | 庄闪闪责编 | 张文头图 | CSDN 下载自视觉中国来源 | 庄闪闪的成长手册(ID:Zss_R4ds) 今天教大家如何制作个人专属日历. 先说说这个包吧,非常简单,比起 ggpl ...
java用calendr做个日历,calendR ：为你定制私人专属日历
作者 | 庄闪闪责编 | 张文头图 | CSDN 下载自视觉中国来源 | 庄闪闪的成长手册(ID:Zss_R4ds) 今天教大家如何制作个人专属日历. 先说说这个包吧,非常简单,比起 ggplo ...
Android系统开发默认壁纸的定制主题风格的开发及定制 DDMS 常用adb 命令抓取Log
Android系统开发 Android系统本身的功能在增加和完善过程中.在系统开发中如果涉及系统API的改动,则一定要慎重,系统的API的改动可能涉及Android应用程序的不 ...
win7临时文件_封装Win7系统定制私人GHO包必须要做的55个优化步骤
很多人想封装win7系统,但是因为win7系统封装前,有很多繁琐的事要做,以前给大家做过封装win7系统的视频教程,但是教程时间太长,很多人没搞清楚这个步骤,我干脆再写下来给大家参考. 1.开启管理员 ...
对比学习sass和stylus的常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
对比学习sass和stylus的常用功能 1
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
otis电梯服务器tt使用说明_南充私人电梯
南充私人电梯,成都蒂澳机电放心产品,并在麓山国际社区.麓湖别墅.蔚蓝卡地亚.城南官邸.城南逸家.复地御香山.万科五龙山.保利198.美城悦荣府.三利宅院.维也纳森林别墅.乐山御墅.华侨城纯水岸(东岸) ...

Less/Sass 定制私人常用方法库