大家一起学习less 5：字符串插值

weixin_34376986

于 2012-09-14 00:39:00 发布

阅读量151

点赞数

文章标签： php ruby

本文介绍了如何在LESS预处理器中使用变量，并演示了将这些变量嵌入到字符串中的具体方法。通过实例展示了如何创建动态背景图片路径及颜色。

变量可以用类似ruby和php的方式嵌入到字符串中，通过@{name}这样的结构:

示例：


//LESS
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

/*生成的CSS*/
background-image: url("http://assets.fnord.com/images/bg.png");


//LESS
@light:#fafafa;
@dark:#888888;

.gradientBackground(@bgc:@dark, @height:500){
//注意插值时bgc是没有带@
    background-image:url('../img/gradients/@{bgc}-@{height}.png');
    background-color:@bgc;
}

.somebox {
    .gradientBackground(@light, 150);
}

/*生成的CSS*/
.somebox {
  background-image: url('../img/gradients/#fafafa-150.png');
  background-color: #fafafa;
}