前端从零单排之LESS（第四期)

2024年2月8日 203次阅读 来源: duian

LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootstrap，bootstrap项目中样式就是less写的，从此就结下了于LESS的缘分。LESS使用的快一年的时间了。
下面简单的列举一下我最爱的三个LESS的特性：

  • 变量
    编译前:
@color: #ccc;
#header {
  color: @color;
}
h2 {
  color: @color;
}

编译后

#header {
  color: #ccc;
}
h2 {
  color: #ccc;
}
  • 混合(Mixins)
    编译前
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

编译后

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
  • 嵌套
    编译前
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px
      }
    }
  }
}

编译后

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

这三个原因我想足以让人爱上LESS了。但是这里需要注意的仍然是有些点：

  • 变量命名是好事，尤其是对颜色、字体、栅格系统有非常大的帮助，但是使用过程还是需要谨慎，最好是有张网站用色的色表图片，展列整个网站所用颜色或者是直接做成网页显示。这样方便多人合作。
  • 函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。
  • 嵌套对程序员更友好， 也更好管理， 但是嵌套过深的话这点就成了灾难，会让人看的整个人都斯巴达掉。 适当嵌套，以保持CSS的优雅。
  • 有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个~符号,具体如下:
.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
}
  • LESS 安装, 同时推荐less在线编译 网站，能够实时看到效果。
  • LESS 能够做数值运算，提供一些函数， 但是我怎么都感觉那是对设计师友好呢， 是我打开方式错了么？

参考文章：
LESS 中文官网
LESS Getting started

    原文作者：duian
    原文地址: https://segmentfault.com/a/1190000000508043
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞