以下内容为本人项目开发中积累的一些常用方法,有需要的小伙伴们Get走
本方法需要准备字体格式(.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行文本
方法括号内为参数,可携带无限个参数,参数和默认值使用:
分隔,如果不传值这使用默认设置
本文未完待续…