[浅谈]CSS/LESS 的介绍

宅男-兜着走

好久没发技术帖子了， 今天是劳动节， 就来劳动劳动下吧。

http://lesscss.org/


LESS 是神马东东? 能吃的吗？ 不能滴！

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

某些方面他确实是做了很多方便 网页开发员的东西。
能在意义上开发出更可 复用性的 CSS 代码。

虾米意思呢？？


看看实例代码
以下乃实验代码， 如果不对请不要见怪。

1. 
   
2. body{
   
3.    font-family : arial;
   
4.    background: #FFF;
   
5. }
   
6. 
   
7. .nav{
   
8.   background : #333;
   
9.   -webkit-border-radius: 4px;
   
10.   -moz-border-radius: 4px;
    
11.   border-radius: 4px;
    
12. }
    
13. 
    
14. .nav li{
    
15.    padding:20px;
    
16. }
    
17. 
    
18. .nav li a{
    
19.    background : #444;
    
20.    color : #FFF
    
21.    text-decoration:underline;
    
22. }
    
23. 
    
24. .nav li a:hover{
    
25.      text-decoration:none;
    
26. }
    
27. 
    
28. 
    
29. 
    
30. .footer{
    
31.   background : #333;
    
32. }
    
33. 
    
34. .menu{
    
35.    float:left;
    
36.    font-weight:bold;
    
37. 
    
38.      background : #333;
    
39.   -webkit-border-radius: 4px;
    
40.   -moz-border-radius: 4px;
    
41.   border-radius: 4px;
    
42. }
    
43. 
    
44. 
    

复制代码

没错， 这是 普通 CSS 的代码， 出来的效果是有圆角的黑色 Navbar， Footer.
为了实验， 写了个.menu 的class, 那么他的properties 跟 navbar 没啥差别， 就多了个 float, font-weight。

那么这些代码假设要放在另外个客户的网站容易吗？
我只能说因人而异
那么如果你使用了 LESS, 你将能得到解脱。 真的吗？

有天，
客户如果要个红色的主题呢？ OH SHIT~ 给我半小时的时间！

可是，
如果使用 LESS, 30 秒能解决你的问题。

以下是 LESS 代码， 跟 上面的 CSS 代码出来的效果是一样的。

1. 
   
2. 
   
3. @cBackground: #333; // com background 的变量
   
4. @radius : 4px; //统一圆角的变量
   
5. 
   
6. body{
   
7.    font-family : arial;
   
8.    background: #FFF;
   
9. }
   
10. 
    
11. .nav{
    
12.   background : @cBackground;
    
13.   border-radius(@radius); // border radius 的mixin， 能支持 IE9, FF, CHROME, SAFARI
    
14. 
    
15.      &li{
    
16.             padding:20px;
    
17.           & a{
    
18.                  background : lighten(@cBackground, 5%); // 自动将颜色调浅 5%
    
19.                  color : #FFF;
    
20.                  text-decoration:underline;
    
21.           }
    
22.          
    
23.           & a:hover{
    
24.                      text-decoration:none;
    
25.           }
    
26.      }
    
27. }
    
28. 
    
29. 
    
30. .menu{
    
31.    float:left;
    
32.    font-weight:bold;
    
33.    .nav(); //自动复制 nav class 的属性。
    
34. }
    
35. 
    
36. .footer{
    
37.   background :@cBackground;
    
38. }
    

复制代码

那么30秒从新自定这个网页的 stylesheet 能吗？ 能。

只需要修改
@cBackground: #333; 成红色， 就行了。 可以pack 公司包回家吃饭了

当然这个例子只是网页开发的冰山一角 。

---- 分界线

LESS 的文件格式是 .less
LESS, 篇写了如果没即时生效是正常的。 因为您需要 篇译器。

windows : http://winless.org/
linux : 首先安装 npm , 然后执行 npm install -g less， 或者使用 ruby-gems 的 lessc 也行

**** 我相信会用 linux 的一定已经很够力在 google 搜寻了， 那么我就点到为止 。

我个人觉得这个好用在混合 CSS STYLE, 跟 从新自定 CSS STYLE 时非常有用。
还有就是整齐的代码， 看了比较不会心烦 (是真的)

可是前提是你必须要非常熟悉他的语法。 现在很都 CSS Framework 都有 支持LESS 的了。 我们能更简单的自定义这些好好用的 CSS Framework。







祝大家劳动节快乐！