欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

less使用小结

程序员文章站 2022-06-18 16:07:31
编译 background缩写加e(‘/’) background: url(../img/dial-del.png) 0 0 e('/...

编译 background缩写加e(‘/’)

background: url(../img/dial-del.png) 0 0 e('/') 24px 16px no-repeat;

less的继承

@import "variable.less";

less写mixin方法

.bg-image(@url) {
  background-image: url("@{url}@2x.png");

  @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("@{url}@3x.png");
  }
}

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


.extend-click(){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

}

调用方法

.bg-image('./../image/logo');