十分钟学会less

正文

请到「今天看啥」查看全文

li{

color: #1A237E;

}

在上面的例子中，背景颜色是白色，文字是深色的，如果我们想要深色的背景和白色的文字，我们只需要改变变量的值，所有用到这些变量的地方都会被替换。

在 http://lesscss.org/features/#variables-feature 你可以获取关于less中变量的更多信息

3. Mixins

LESS可以帮你把一个已经存在的class或者id下面所有的样式应用在其他的选择器里面。下面这个例子可以更好的说明：

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}
#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

你过你不想把你用于mixin输出在最终的css文件里，你可以加上一个圆括号：

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}
#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

请到「今天看啥」查看全文