less07 important

weixin_30480583

于 2017-06-13 11:39:00 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaowen/p/7000305.html

本文介绍了一个使用LESS预处理器定义样式并在CSS中调用的示例。通过LESS的变量和混合特性，实现了不同类别的样式设置。最终转换为纯CSS代码，展示了LESS简化样式表管理和维护的能力。

less

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
  font-size: 16px;
  font-weight: 900;
}

.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

css

.unimportant {
  background: #f5f5f5;
  color: #990000;
  font-size: 16px;
  font-weight: 900;
}
.important {
  background: #f5f5f5 !important;
  color: #990000 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}