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