使用lesscss来编码编写CSS

开发 前端
lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法。

lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法。这个项目的网站在国内访问不到,大家都懂的。这里只给出地址:http://www.lesscss.org/

 

lesscss使用方法有两种:

◆ 页面添加一个 less.js的文件,css使用 style.less 文件后缀来编写,不过需要有服务器的环境支持

  1. <link rel="stylesheet/less" type="text/css" href="styles.less">  
  2. <script src="less.js" type="text/javascript"></script>  

◆ 在服务器端使用node.js来编译,node.js 使用 less的方法如下:

先使用npm包管理器来安装

$ npm install less

然后就可以使用命令行来编译压缩less代码了

$ lessc styles.less > styles.css

下面是一些lesscss的语法:

使用变量

  1. // LESS   
  2. @color#4D926F;     
  3. #header {  
  4.   color: @color;  
  5. }  
  6. h2 {  
  7.   color: @color;  
  8. }  
  9. /* Compiled CSS */    
  10. #header {  
  11.   color#4D926F;  
  12. }  
  13. h2 {  
  14.   color#4D926F;  
  15. }  

2.组合

  1. // LESS  
  2.    
  3. .rounded-corners (@radius: 5px) {  
  4.   border-radius: @radius;  
  5.   -webkit-border-radius: @radius;  
  6.   -moz-border-radius: @radius;  
  7. }  
  8.    
  9. #header {  
  10.   .rounded-corners;  
  11. }  
  12. #footer {  
  13.   .rounded-corners(10px);  
  14. }  
  15. /* Compiled CSS */ 
  16.    
  17. #header {  
  18.   border-radius: 5px;  
  19.   -webkit-border-radius: 5px;  
  20.   -moz-border-radius: 5px;  
  21. }  
  22. #footer {  
  23.   border-radius: 10px;  
  24.   -webkit-border-radius: 10px;  
  25.   -moz-border-radius: 10px;  
  26. }  

3.选择器

  1. // LESS  
  2.    
  3. #header {  
  4.   h1 {  
  5.     font-size26px;  
  6.     font-weightbold;  
  7.   }  
  8.   p { font-size12px;  
  9.     a { text-decorationnone;  
  10.       &:hover { border-width1px }  
  11.     }  
  12.   }  
  13. }  
  14.    
  15. /* Compiled CSS */ 
  16.    
  17. #header h1 {  
  18.   font-size26px;  
  19.   font-weightbold;  
  20. }  
  21. #header p {  
  22.   font-size12px;  
  23. }  
  24. #header p a {  
  25.   text-decorationnone;  
  26. }  
  27. #header p a:hover {  
  28.   border-width1px;  
  29. }  

4. 变量预算

  1. // LESS  
  2.    
  3. @the-border1px;  
  4. @base-color#111;  
  5. @red:        #842210;  
  6.    
  7. #header {  
  8.   color: @base-color * 3;  
  9.   border-left: @the-border;  
  10.   border-right: @the-border * 2;  
  11. }  
  12. #footer {  
  13.   color: @base-color + #003300;  
  14.   border-color: desaturate(@red10%);  
  15. }  
  16.    
  17. /* Compiled CSS */ 
  18.    
  19. #header {  
  20.   color#333;  
  21.   border-left1px;  
  22.   border-right2px;  
  23. }  
  24. #footer {  
  25.   color#114411;  
  26.   border-color#7d2717;  
  27. }  

5. import 外部css

  1. @import "lib.less";  
  2. @import "lib";  

通用引用了lesscss,我们就可以将css写得模块化,有更好的阅读性。

首先可以通过 import 讲网站的样式分成 n个模块,当页面需要哪个模块就引用哪个。还可以将css3那些新增的功能定义成类库,由于有函数的功能,那些圆角,阴影之类样式只需要定义一次就可以了。讲页面需要使用到的主要文本,边框,背景色定义成变量给后续样式使用,到时网站风格需要改变,颜色也很好的修改。

我个人觉得先阶段lesscss的不足有:

1. css3的样式不能自动补全其他浏览器的hack。

2.使用nodejs在window系统下的支持不够,不过最近刚刚不久发布了一个nodejs window版,这方面估计在不久的将来会改善

3.编辑器,ide对lesscss语法缩进支持不够友好。

原文:http://www.cnblogs.com/qiangji/archive/2011/08/01/lesscss.html

【编辑推荐】

  1. 8月8款非常实用的CSS工具推荐
  2. HTML 5和CSS3表单示例和详细教程汇总
  3. Web设计师必备:10款***免费CSS在线编辑器
  4. 44个惊人的超炫CSS3动画演示
  5. 六月***的HTML 5和CSS3教程强烈推荐
责任编辑:陈贻新 来源: 强记的博客
相关推荐

2010-09-13 10:00:51

CSS注释

2023-10-30 09:18:28

CSSColumns布局

2010-09-06 09:06:22

CSS

2020-03-26 10:43:57

CSS Grid Ge Grid代码

2013-04-08 12:41:35

JavaScriptJS

2010-08-31 13:32:12

CSS

2010-09-13 10:11:06

CSSDWMX

2024-05-11 18:48:40

技巧代码技能

2010-09-10 15:23:54

CSS匹配CSS

2010-09-03 09:14:28

CSS

2010-09-09 11:16:06

CSS交互

2013-03-11 10:30:56

CSSWeb

2010-08-26 15:27:57

CSS

2010-09-07 13:04:14

CSS Hack

2010-08-27 09:37:44

DIV CSS

2024-05-13 11:36:23

CSS文本属性

2017-08-28 14:58:19

CSSFlexbox注释格式优化

2016-09-07 19:58:47

CSS代码Web

2011-01-11 13:40:44

webcssdiv

2024-01-22 10:31:09

Kate文档
点赞
收藏

51CTO技术栈公众号