Less通用类mixins整理 – 持续更新

“ Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。 ”

–引自Less中文

Less在css编写过程中带来的便利就不必多说,它的优势谁用谁知道。当然less也有它的缺点(任何一门语言都是如此),这里不做评论。

本篇就我们在编写less过程中经常用到的类进行整理,避免每次重复的编写,费时费力。

Ps: 初次进行整理,可能会漏掉很多通用类,有些甚至是每个项目必用的通用类。本篇会持续进行更新,尽量保证类库丰富多样。

/**
* @name: mixins.less
* @description: 通用类定义
* @author: Alan(alan_webdeveloper@163.com)
* @update: 2019-07-06 10:46
*/

.fl() {
    float: left;
}

.fr() {
    float: right;
}

.clearFix() {
    &before,
    &:after {
        content: " ";
        display: table;
        zoom: 1;
    }
    &:after {
        clear: both;
    }
}

.img-responsive () {
    display: block;
    max-width: 100%;
    height: auto;
}

.center-block () {
    margin-left: auto;
    margin-right: auto;
}

//网速慢导致图片加载抖动 优化
#img-optimize (@name: 100%) {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: @name;  /* 根据图片高宽比设置向下内边距  高/宽 */
    background: #f2f2f2;
   
    img {
        width: 100%;
    }
}

#border-radius(@name: 5px) {
    -webkit-border-radius: @name;
      -moz-border-radius: @name;
        border-radius: @name;
}

.text-overflow() {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#text-vertical(@name) {
    height: @name;
    line-height: @name;
}

.opacity(@val){
    filter: alpha(opacity=@val);
    opacity: @val / 100;
}

.min-height(@height){
    min-height: @height;
    height: auto !important;
    _height: @height;
}

//表单元素垂直居中对齐(也可设置顶对齐,底对齐)
.form-element-v-align(@alignment: middle){
    display: inline-block;
    vertical-align: @alignment;
    *vertical-align: auto;
    *display: inline;
    zoom: 1;
}

//绝对居中(相对于固定宽高的容器)
.absolute-center(@width, @height){
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(@width / 2);
    margin-top: -(@height / 2);
    width: @width;
    height: @height;
}

以上就是目前整理的less通用类mixins。持续更新中…

文件上传于2019.7.6