less使用小结

最新推荐文章于 2021-12-21 10:02:44 发布

原创最新推荐文章于 2021-12-21 10:02:44 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #css

less 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用LESS预处理器进行样式编写的方法，包括背景图片设置、文字换行处理及点击区域扩展等实用技巧，并展示了如何定义和使用mixin来实现响应式背景图片加载。

编译 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;
}

}