loading...

0

less的使用

css读完大概需要28分钟

  • 发布时间:2017-07-31 23:52 星期一
  • 刘伟波
  • 187
  • 更新于2017-07-31 23:52 星期一

@charset "utf-8";

/*!

 * utils.less v3.0

 * based on veryless: http://veryless.org/

 */           

// 清除(闭合)浮动:http://www.iyunlu.com/view/css-xhtml/55.html

.Clearfix () { 

    *zoom: 1;

    &:before, 

    &:after {

        display: table;

        content: "";

      /*

       * Fixes Opera/contenteditable bug:

       * http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952

       */

      line-height: 0;

    }

    &:after {

        clear: both;

    }

}

// inline-block

.Inline-block () { 

    /* 如果有必要可在其父元素上应用样式vertical-align:top; */

    display:inline-block; 

    *display:inline; 

    *zoom:1;

// 文字隐藏

.Text-hidden () {

    /* 

     * 魔鬼的text-indent-9999px:

     * http://prezi.com/t8yyirefxn2u/text-indent-9999px/ 

     */

    text-indent: 100%;

    white-space: nowrap; /* 强制不换行 */

    overflow: hidden;

}

.Text-ellipsis () {

    /* 

     * 文字溢出隐藏显示省略号,需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的) 

     */

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

// 文字(强制)折行

.Text-break () {

    word-wrap:break-word;

    word-break:break-all;

}

// 自定义字体

.Font-face(@path, @font-name){

    @font-face{

        font-family: @font-name;

        src: url('@{path}/@{font-name}.eot');

        src: url('@{path}/@{font-name}.eot?#iefix') format('embedded-opentype'),

             url('@{path}/@{font-name}.woff') format('woff'),

             url('@{path}/@{font-name}.ttf')  format('truetype'),

             url('@{path}/@{font-name}.svg#svgFontName') format('svg');

    }

}

// (整体)透明

.Opacity (@a: 0.3) {

    @aa: (@a*100); 

    opacity: @a;

    filter: ~"Alpha(Opacity=@{aa})"; /* ie5-8 */

    *zoom: 1; /* 应用滤镜的元素必须拥有layout */

}

// 背景透明

.Background-rgba (@r: 0, @g: 0, @b: 0, @a: 0.3) {

    @c: rgba(@r, @g, @b, @a);

    @cc: argb(@c);

    background-color:@c;

    filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='@{cc}',EndColorStr='@{cc}')";

    *zoom: 1;

}

// 圆角

.Border-radius (@a: 3px) {

    -webkit-border-radius: @a;

       -moz-border-radius: @a;

            border-radius: @a;

}

// 阴影

.Box-shadow ( @a: 0 1px 3px rgba(0,0,0,.3); ) {

    -webkit-box-shadow: @a;

       -moz-box-shadow: @a;

            box-shadow: @a;

}

// 渐变

.Linear-gradient (@a: #ffa600; @b: #fe9200) {

    filter: ~'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="@{a}", endColorstr="@{b}")';

    background-image: -webkit-linear-gradient(top,@a, @b);

    background-image: -moz-linear-gradient(top,@a, @b);

    background-image: -ms-linear-gradient(top,@a  0,@b 100%);

    background-image: -o-linear-gradient(top,@a, @b);

    background-image: linear-gradient(top,@a, @b);

}

// 禁用渐变

.Linear-gradientDisable () {

    background-image: none;

  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);  /* 禁用渐变 */

}

.Box-sizing ( @a: content-box ) {

    -webkit-box-sizing: @a;

       -moz-box-sizing: @a;

            box-sizing: @a;

}

// 利用边框制作小三角

.Triangle (@type: bottom, @x: 10px, @c: #999, @y: @x) {

  display: inline-block;

  width:0; height:0; overflow:hidden;

  vertical-align: middle;

  // 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题 

  @transparent: @y dashed transparent; 

  // 该特殊边框的大小必须小于其他边框大小的四倍,否则IE6会有问题 

  @special: @x solid @c;

  .border();

  .border () when (@type = bottom) {

    border-bottom: @special;

    border-left: @transparent;

    border-right: @transparent;

  }

  .border () when (@type = top) {

    border-top: @special;

    border-left: @transparent;

    border-right: @transparent;

  }

  .border () when (@type = left) {

    border-left: @special;

    border-top: @transparent;

    border-bottom: @transparent;

  }

  .border () when (@type = right) {

    border-right: @special;

    border-top: @transparent;

    border-bottom: @transparent;

  }

}

// 鼠标经过旋转

.Rotate (@d: 180deg, @s: .3s) {

    -webkit-transition: @s ease-in;

    -moz-transition: @s ease-in;

    -o-transition: @s ease-in;

    transition: @s ease-in;

    &:hover, &-hover{

        -webkit-transform: rotate(@d);

        -moz-transform: rotate(@d);

        -ms-transform: rotate(0); 

        -o-transform: rotate(@d);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

        -ms-filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";

        transform: rotate(@d);

    }

}

// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)

.Grayscale() { 

    -webkit-filter: grayscale(100%);   

    -webkit-filter: grayscale(1);    /* Chrome 19+ & Safari 6+ */

       -moz-filter: grayscale(100%); 

        -ms-filter: grayscale(100%); 

         -o-filter: grayscale(100%); 

            filter: grayscale(100%);

            /* firefox 3.5+,慎用!存在性能问题 */ 

            filter: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale');           

            filter: gray; /* IE6~9 */ 

}

.Max-height(@h, @pd: 0) {

    @Hnum: unit(@h);

    @PDnum: unit(@pd);

    max-height: @h;

    _height:~"expression( (this.clientHeight-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";

    _overflow: hidden;

    _zoom: 1;

    /* 

     * clientHeight = height + padding;

     * offsetHeight = height + padding+border;

     */

}

.Max-width(@h, @pd: 0) {

    @Hnum: unit(@h);

    @PDnum: unit(@pd);

    max-width: @h;

    _width:~"expression( (this.clientWidth-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";

    _overflow: hidden;

    _zoom: 1;

}

.Min-height(@h, @pd: 0) {

    @Hnum: unit(@h);

    @PDnum: unit(@pd);

    min-height: @h;

    _height:~"expression( (this.clientHeight-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";

    _overflow: hidden;

    _zoom: 1;

}

// 一个老外的博客中看到的:

.Min-height2(@h) {

  min-height: @h;

  height: auto !important; /*all browsers except ie6 will respect the !important flag*/

  height: @h; /*Should have the same value as the min height above*/

}

.Min-width(@h, @pd: 0) {

    @Hnum: unit(@h);

    @PDnum: unit(@pd);

    min-width: @h;

    _width:~"expression( (this.clientWidth-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";

    _overflow: hidden;

    _zoom: 1;

}

.Clip (@t: 0px, @r: 0px, @b: 0px, @l: 0px) {

    position:absolute; clip:rect; /* 矩形剪裁只能作用于 position:absolute|fixed 的元素上 */

    clip: rect(@t @r @b @l); /* IE6, IE7 */

    clip: rect(@t, @r, @b, @l);

}

// 解决Retina屏幕下的图像显示

.Retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {

  background-image: url("@{file-1x}");

  @media

  only screen and (-webkit-min-device-pixel-ratio: 2),

  only screen and (   min--moz-device-pixel-ratio: 2),

  only screen and (     -o-min-device-pixel-ratio: 2/1),

  only screen and (        min-device-pixel-ratio: 2),

  only screen and (                min-resolution: 192dpi),

  only screen and (                min-resolution: 2dppx) {

    background-image: url("@{file-2x}");

    background-size: @width-1x @height-1x;

  }

}

.Image-set (@a1, @a2) {    

    /* 

     * 解决Retina屏幕下的图像显示,淘宝首页的css sprite解决方案

     * image-set是CSS4的属性,"safari6"和“chrome21”支持

     * 如果浏览器支持image-set,普通显屏,此时浏览器会选择image-set中的@1x背景图像; Retina屏幕,此时浏览器会选择image-set中的@2x背景图像;

     * 扩展阅读:http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html

     */

    background: url(@a1);

    background-image: -webkit-image-set(url(@a1) 1x, url(@a2) 2x);

    background-image: -moz-image-set(url(@a1) 1x,url(@a2) 2x);

    background-image: -ms-image-set(url(@a1) 1x,url(@a2) 2x);

    background-image: -o-image-set(url(@a1) 1x,url(@a2) 2x);

    background-repeat: no-repeat;

}

.User-select(@select: auto) {

  -webkit-user-select: @select;

     -moz-user-select: @select;

      -ms-user-select: @select;

       -o-user-select: @select;

          user-select: @select;

}

// “完全居中”: http://codepen.io/shshaw/full/gEiDt

.Absolute-Center() {

  /*

   * 1.必须声明元素[max-]height和[max-]width

   * 2.Chrome, Firefox, Safari, Mobile Safari, IE8+; 不支持Windows Phone无效

   */

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

  overflow: auto;

  resize: both; // 不支持移动版浏览器和IE10-,[可选]

}

// 图片水平垂直居中: http://blog.moocss.com/code-snippets/html-css-code-snippets/1390.html

.Image-center(@w, @h: @w){

  @width: unit(@w);

  @height: unit(@h);

  @_fontsize: (@height * 0.873);

  width: ~'@{width}px';

  height: ~'@{height}px';

  overflow: hidden;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  

  *display: block;//IE hack

  *font: ~"@{_fontsize}px/1em Arial";

  

  img{

    display: inline;

    max-height: 100%;

    max-width: 100%;

    vertical-align: middle;

  }

}

// CSS3 "栅格化"(flexbox):http://www.zhihu.com/question/22991944

.Display-box() {

  display: -webkit-box;  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

  display: -moz-box;     /* Firefox 17- */

  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

  display: -moz-flex;    /* Firefox 18+ */

  display: -ms-flexbox;  /* IE 10 */

  display: flex;         /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}

.Box-flex(@a) {

  -webkit-box-flex: @a;

  -moz-box-flex: @a;

  box-flex: @a;

}


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!