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

以下内容为本人项目开发中积累的一些常用方法，有需要的小伙伴们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";

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

以下以多行文本截取为例：

我是一段多行文本内容，看看截取效果怎么样吧。我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊，我后面还有很多文本啊。

Less版本
*****************************
.text{
width:200px; height:60px; .text-xline();
}
// 设置截取2行文本(方法内部默认值为2)

Sass版本
*****************************
.text{
width:200px; height:60px; @mixin text-xline(3);
}
// 设置截取3行文本

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

本文未完待续…