LESS,动态的css

前段时间看见很多人的板子都在使用Bootstrap框架来构建,确实减少了工作量,兼容性也有保障,尤其是栅格系统带来的天生响应式设计。说到底Bootstrap就是一套已经写好的css和js,在需要的时候进行引入。

Bootstrap对我的吸引力并不大,但其中所使用的LESS却非常吸引我。在编写css的时候,常常会使用一个基础的色调,比如现在这套模板所使用的#00A3CF,在LOGO的背景、下方的三角、标题的左侧、页码和返回顶部的按钮上都有,虽然改动的时候查找-全部替换就行,但是在编写的时候需要一个个的去复制、粘贴,相当麻烦。此外还有每个人都必须遇到的伪类问题,尤其是a标签的爱恨伪类(LoVe HAte),当选择器过长时,连续复制四段又麻烦又影响美观,这都是传统css书写时的弊端。

所以LESS诞生了,它赋予了css变化的能力。比如这套模板所使用的#00A3CF,在LESS中可以将它化身为一个变量。

1
2
@color: #4D926F;
.title { border-left: 7px solid @color;}

在经过LESS编译以后,会自动输出:

1
.title { border-left: 7px solid #4D926F;}

而一直头疼的伪类,则可以使用更加简洁的嵌套(支持多次嵌套):

1
2
3
4
5
.title a { color: #333;
    &:visited { color: #666;}
    &:hover { color: #00A3CF;}
    &:active { color: #017CB9;}
}

在经过LESS编译以后,会自动输出:

1
2
3
4
.title a { color: #333;}
.title a:visited { color: #666;}
.title a:hover { color: #00A3CF;}
.title a:active { color: #017CB9;}

无论是书写还是思考,都比传统的css更加方便。

此外LESS还支持css的运算,比如设定一个基础色调,其它颜色根据此色调进行16位颜色代码的计算,当需要更换整体色调时,即可“牵一发而动全身”。

了解更多:http://www.lesscss.net

评论

  1. sn
    sn

    你的代码高粱是什么插件

    回复
    1. banri
      banri

      此外建议修改下内置的CSS,有个width: 98%可以去掉,感觉不伦不类的……

      回复
    2. banri
      banri

      http://plugins.typecho.me/plugins/code-box.html

      这个插件,可以用code或者pre标签,<code lang="代码语言比如php css"></code>

      回复