标签:ima amp sample log 方法 url back 随机 length
在线上环境中, 经常会有多个cdn 地址来加速静态资源的加载, 对于模板文件中的js, css, img 都可以通过后端的helper方法在render时分配,
但是在css 中也会有url地址, 比如 font-face, background-image: url(), 这里的信息是静态的, 所以需要在scss文件转换的时候做处理。
这里的前提是cdn域名列表内容比较固定, 不会经常变更。
sampleCDN内容很简单, 每次随机一个地址。
@function sampleCDN() { $cdn: ‘http://cdn1.com‘, ‘http://cdn2.com‘, ‘http://cdn3.com‘; $nth: nth($cdn, random(length($cdn))); @return $nth } .img-a { background-image: url(‘#{sampleCDN()}/hello.png‘); } .img-b { background-image: url(‘#{sampleCDN()}/hello.png‘); } .img-c { background-image: url(‘#{sampleCDN()}/hello.png‘); } .img-d { background-image: url(‘#{sampleCDN()}/hello.png‘); } .img-e { background-image: url(‘#{sampleCDN()}/hello.png‘); }
输出:
.img-a { background-image: url("http://cdn2.com/hello.png"); } .img-b { background-image: url("http://cdn2.com/hello.png"); } .img-c { background-image: url("http://cdn3.com/hello.png"); } .img-d { background-image: url("http://cdn3.com/hello.png"); } .img-e { background-image: url("http://cdn1.com/hello.png"); }
使用sass random 函数随机分配cdn hostname
标签:ima amp sample log 方法 url back 随机 length
原文地址:http://www.cnblogs.com/tangkikodo/p/6839300.html