Ruby's Louvre

每天学习一点点算法

导航

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

变量可以用类似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;
}

posted on 2012-09-14 00:39  司徒正美  阅读(2329)  评论(0编辑  收藏  举报