less使用小结

编译 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');