美文网首页
less传参问题:在url中插入变量

less传参问题:在url中插入变量

作者: 明灭_ | 来源:发表于2018-10-25 20:02 被阅读0次

    今天在需要用less给url传递参数时遇到了小问题,一番搜索后有了下述解决方法:
    1、background-image

    @url: 'brand'
    
    .bg-image {
        background-image: ~"url(@{url}@2x.png)";
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
          background-image: ~"url(@{url}@3x.png)";
        }
    }
    

    其中,“~”为转义,借此我们可以使用任意字符串作为属性或变量的值。
    ~“......”中的任何内容都会按原样输出,除了插值之外没有任何变化。

    可参考less文档中对Escaping(~)的描述

    2、background

    background: url('@{url}@2x.png') no-repeat center
    

    相关文章

      网友评论

          本文标题:less传参问题:在url中插入变量

          本文链接:https://www.haomeiwen.com/subject/xlnctqtx.html