• 【LESS系列】一些常用的Mixins


    在我们平时的开发中,对于一些使用频率很高的方法函数,我们一般都会将其归纳到一起,整理出一个核心库来。

    其实这个思想,借助 LESS 也可以在 CSS 中得以实现。

    下面是几个在 W3CPLUS 中偷过来的常用 Mixins,将其转成 LESS 版~~~

    在开始前,必须说说 LESS 的一个不足之处,那就是不能像 SASS 那样使用 @if 和 @for 作判断和循环。

    这使得我们无法通过传参的方式来使 Mixins 根据需要编译出PC端和移动端的样式版本。

    不过个人认为,这也不是什么致命的缺陷,它还是基本能满足工作需要的了。

    但正因为这个缺陷,下面转化出来的 Mixins 注定不能和 SASS 的相提并论了,我们需要根据需要,整理出PC端和移动端两个版本的 Mixins 库了。

    //表单元素垂直居中对齐(也可设置顶对齐,底对齐)
    .form-element-v-align(@alignment: middle){
      display: inline-block;
      vertical-align: @alignment;
      *vertical-align: auto;
      *display: inline;
      zoom: 1;
    }
    
    //水平居中
    .horizontal-center(){
      margin-left: auto;
      margin-right: auto;
    }
    
    //绝对居中(相对于固定宽高的容器)
    .absolute-center(@width, @height){
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -(@width / 2);
      margin-top: -(@height / 2);
      width: @width;
      height: @height;
    }
    
    //浮动(主要针对PC端了...)
    .float(@side: left){
      float: @side;
      _display: inline;
    }
    
    //清除浮动(其实很多时候,clear-fix也被提取为单类使用)
    .clear-fix(){
      *zoom: 1;
      &:before,
      &:after {
        content: "";
        display: table;
        clear: both;
        overflow: hidden;
      }
    }
    
    //截取文本(仅针对单行)
    .text-single-line-ellipsis(@height, @line-height, @ auto){
      width: @width;
      height: @height;
      line-height: @line-height;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    //设置透明度
    .opacity(@val){
      filter: alpha(opacity=@val);
      opacity: @val / 100;
    }
    
    //不可用状态
    .disabled(@bgColor:#e6e6e6, @textColor:#ababab){
      background-color: @bgColor !important;
      color: @textColor !important;
      cursor: not-allowed !important;
    }
    
    //最小高度(主要针对PC端了...)
    .min-height(@height){
      min-height: @height;
      height: auto !important;
      _height: @height;
    }
  • 相关阅读:
    html5--6-10 CSS选择器7--伪类选择器
    html5--6-9 CSS选择器6--伪类选择器
    html5--6-8 CSS选择器5
    避开美国全球监控阴影下的问题手机,寻求新伙伴
    DMA过程分析
    混淆
    Missile:双状态DP
    Java抓取网页数据(原网页+Javascript返回数据)
    Binders 与 Window Tokens(窗体令牌)
    编程之美2013 初赛一 A
  • 原文地址:https://www.cnblogs.com/czf-zone/p/4366076.html
Copyright © 2020-2023  润新知