更强大的 Less 模板

为了充分使用 LESSCSS 进行 css 编码,尤其是解决各类 css3 兼容头归一化的问题,我们需要在 LESS 语法基础上面定义一些 mixin 函数。

这样,在实际编写 lesscss 的时候,才可以简单地编写出全兼容的 css 样式表。

于是,在重新审查各种 css3 属性之后,完善了这个仓库,可以供后期稳定使用:https://github.com/EaseCloud/less-template


比较特殊的是关于 keyframes 的问题,讨论参见:http://stackoverflow.com/q/9166152/2544762

实际使用 less-template 进行定义的时候,遵循如下的规则:

  1. 首先为了限制变量定义块,需要使用 & { } 来在当前层级插入一个局部作用域;
  2. 使用 .keyframes(name); 声明动画名称;
  3. 在同一个作用域里面定义 .-frames(@-...) { } 块描述动画,然后供 .keyframes 展开。

例如:

body {
  & {
    .keyframes('slide-down');
    .-frames(@-...) {
      from { height: 0; }
      to { height: auto; }
    }
  }
}

对于一些特殊的变换逻辑,收集了下面的参考文章:

关于 matrix 变换:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2015/12/stronger-less.html【更强大的 Less 模板】

发表评论

电子邮件地址不会被公开。 必填项已用*标注