让css动起来—-lesscss（2）

标签： css 前端 | 发表时间：2012-02-26 17:10 | 作者：苏河
出处：http://www.36ria.com

话说上次谈及lesscss的时候是去年11月份，传送门在 这里，上次介绍了lesscss的大部分应用和属性，随着2011年下半年 lesscss中文官网的出现，我觉得再多的介绍lesscss的使用已经没什么必要了，这部分的文章苏河主要给大家介绍下lesscss在项目中的应用。

下面是去年的一个项目部分使用lesscss的例子，lesscss我只做了部分尝试，就lesscss本身来说，它比较适合重用性比较高的代码（个人理解），如果是换肤的功能，我想lesscss再合适不过了。当然也有很多工程师喜欢lesscss的这种代码风格，如果它能够少了编译的这层环节，那么我认为不管是它的可维护性和可扩展性，易读性都会是大家选择它的原因。

上面是我的项目目录，之所以选择base作为试点是一来是因为base包含皮肤样式，字体样式，它是个重用性很高的地方，而其他模块则可以采取import的方式来引用base库，二来是因为base库不管是对现在的项目或者是以后的类似的拓展项目都有很高的重用性和扩展性。

首先是libs.less，大致介绍下的代码组成部分

常量

通常常量是定义的网页的基本全局的变量，比如字体颜色、背景颜色、超链接颜色等等，为了保证各个模块的一致性，我们定义常量来统一管理一张网页的基本设定，试想，如果有其他市场需要使用我们的样式，它们希望的只是皮肤的更改，那么我们只需要修改libs里面的常量就能达到牵一发动全身的效果了。

  1. //constants
  2. /*font*/
  3. @red-font:#cc0000;
  4. @blue-font:#1ac5e1;
  5. @normal-font:#333;
  6. @gray-font:#666;
  7. @light-font:#b0b0b0;
  8. @white:#fff;
  9. /*background-color*/
  10. @blue-back:#1AC5E1;
  11. @red-back:#E40007;
  12. @body-back:#fdf4e9;
  13.  
  14. /*width*/
  15. @page-width:990px;

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性，这里我们用yui3的布局方式尝试

  1. /* YUI3 inline-block*/
  2. .inline-block(){
  3.     display:inline-block;
  4.     vertical-align:top;
  5.     *display:inline;
  6.     *zoom:1;
  7. }
  8. .grid-container(){
  9.     letter-spacing:-0.31em;
  10.     *letter-spacing:normal;
  11.     word-spacing:-0.43em;
  12. }
  13. .grid-unit(){
  14.     letter-spacing:noraml;
  15.     word-spacing:noraml;
  16.     .inline-block();
  17. }

函数

我们定义一些公用的函数，然后在其他需要调用的地方使用这些函数，这里定义的函数比较多，具体说明可以直接看代码

  1. /*reset css*/
  2. .reset(){
  3.     margin:0;
  4.     padding:0;
  5. }
  6.  
  7. /*wrap*/
  8. //文字函数
  9. .wrap () {
  10.   text-wrap: wrap;
  11.   white-space: pre-wrap;
  12.   white-space: -moz-pre-wrap;
  13.   word-wrap: break-word;
  14. }
  15. /*float*/
  16. //浮动函数
  17. .left(){
  18.     float:left;
  19.     *display:inline;
  20. }
  21. .right(){
  22.     float:right;
  23.     *display:inline;
  24. }
  25. .clear(){
  26.     *zoom : 1;
  27.     &:after{
  28.         content: '\0020';
  29.         display: block;
  30.         height: 0;
  31.         clear: both;
  32.     }
  33. }
  34.  
  35. /*img vertical*/
  36. //图片居中函数，接受图片尺寸
  37. //@注：本人非常喜欢这种风格的代码，闭包的形式让样式思路非常清晰，作用域的思路让代码更容易维护
  38. .pic(@size:30px){
  39.     overflow: hidden;
  40.     width:@size;
  41.     height:@size;
  42.     a{
  43.         display: table-cell; /*主流浏览器*/
  44.         vertical-align: middle;
  45.         text-align: center;
  46.         /* IE6,7 hack */
  47.         *display: block;
  48.         *font-family: Arial;
  49.         *line-height: 0;
  50.         width:@size;
  51.         height:@size;
  52.         *font-size:@size*0.873;
  53.         img{
  54.             vertical-align: middle;
  55.         }
  56.     }
  57. }
  58.  
  59. /*border-radius note: default value:3px*/
  60. //圆角函数,低版本浏览器采用IE-CSS3
  61. .border-radius (@radius:3px) {
  62.     border-radius: @radius;
  63.     -moz-border-radius: @radius;
  64.     -webkit-border-radius: @radius;
  65.     //IE
  66.     behavior: url(ie-css3.htc);
  67.     zoom:1;
  68. }
  69.  
  70. /*gradient*/
  71. //阴影函数，接受两个参数，初始颜色和结束颜色
  72. .gradient(@fromcolor:#000,@tocolor:#fff){
  73.     background: -webkit-gradient(linear, 0 0, 0 100%, from(@fromcolor), to(@tocolor));
  74.     background: -moz-linear-gradient(top, @fromcolor, @tocolor);
  75. }

接下来是关于libs.less的引用，具体体现在base.less

base.less主要是base库的主要部分，它负责生成一些公用的样式供其他业务模块使用，通过引用libs.less来生成自己希望得到的样式

  1. @import 'libs.less';
  2.  
  3. /*-------------------------------------------------------------------------------
  4. * Author:      suhe <[email protected]>
  5. * Desc: Less版本的base
  6. -----------------------------------------------------------------------------*/
  7.  
  8. /*-----=Reset: -----------------------------------------------{{{1*/
  9.  
  10. html{ overflow-y:scroll;}
  11. //常量使用
  12. body{
  13.         background-color: @body-back;
  14. }
  15. //libs函数的调用
  16. pre { .wrap }
  17.  
  18. ul,li{
  19.     .reset;
  20. }
  21.  
  22. /*--------------------------------------------------------END-}}}1*/
  23.  
  24. /*-----=Common Class:  -----------------------------------------{{{1*/
  25. //作用域和函数的结合使用
  26. .grid{
  27.     .grid-container();
  28.     .g-u{
  29.         .grid-unit();
  30.     }
  31. }
  32.  
  33. .floatleft { .left() }
  34.  
  35. .floatright { .right() }
  36.  
  37. .clearfix { .clear() }
  38.  
  39.  
  40. /*-----=图片居中---------------------------------{{{2*/
  41. //函数多次调用体现less的重用性
  42. .s30{
  43.     .pic(30px);
  44. }
  45. .s60{
  46.     .pic(60px);
  47. }
  48. .s80{
  49.     .pic(80px);
  50. }
  51.  
  52. /*-----=图片居中---------------------------------{{{2*/
  53.  
  54.  
  55. /*----------------------------------------------END-}}}2*/
  56.  
  57. /*--------------------------------------------------------END-}}}1*/
  58. //常量的使用
  59. #content{
  60.     width:@page-width;
  61.     margin:0 auto;
  62. }

以上介绍两个模块作为lesscss的初步尝试，至于其他的业务模块的尝试也同base差不多，所以不多做介绍。

结束语

我觉得有必要补充一点，就是关于lesscss的服务器环境配置，随着现在node在windows平台的完善，个人觉得lesscss的使用简单了许多，笔者曾经采用的是.NET的编译环境，现在也将环境随之迁移至node。当然，题外话，如果将less编译的工作放在部署机器，而客户端只需要引入less.js来验证效果，部署机器做filter工作过滤lesscss.js然后做替换，这样的方案会比较完美些。

现在IDEA11已经有了less的插件支持，这个非常赞，相信在node环境下做个多模块一键编译的工具不会太难，这样一来，less的很多瓶颈得到了解决，相信less在不久的将来会有越来越大的用户群。

相关 [css lesscss] 推荐：

让css动起来—-lesscss（2）

- - ria之家--RIA三部曲：jquery、ext、flex
话说上次谈及lesscss的时候是去年11月份，传送门在 这里，上次介绍了lesscss的大部分应用和属性，随着2011年下半年 lesscss中文官网的出现，我觉得再多的介绍lesscss的使用已经没什么必要了，这部分的文章苏河主要给大家介绍下lesscss在项目中的应用. 下面是去年的一个项目部分使用lesscss的例子，lesscss我只做了部分尝试，就lesscss本身来说，它比较适合重用性比较高的代码（个人理解），如果是换肤的功能，我想lesscss再合适不过了.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素. ●XHTML：可扩展 HTML. 对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者：kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读：6 评论：0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文： CSS Architecture，编译： CSDN-张红月. Philip Walton 在AppFolio担任前端工程师，他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践，并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS，为简单理解，将CSS说成两步，一步是你做个“记号”，另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词（选择器），而根据记号设置样式呢，就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子，或是用id做记号，或是用name，或是用class，只有有了这些所谓的记号，CSS设定的样式才有用，.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器：标签选择器，ID选择器，类选择器，通用选择器. 通用选择器：*{css代码}. 通用选择器作用：对整个网页中所有HTML标签进行样式定义. 常见用法：定义*{margin:0;padding:0}通用样式，并置于CSS文件最顶端，用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性. 容器: container 页头：header 内容：content/container. 页面主体：main 页尾：footer 导航：nav . 侧栏：sidebar 栏目：column 左右中：leftright center .

css基础入门

- - CSDN博客推荐文章
css是Cascading Style Sheets的缩写，是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言，用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离，使得网页设计更加明了、简洁. Css可以精确控制网页布局，如行间距、字间距、段落缩进和图片定位等.