JBTALKS.CC

标题: [浅谈]CSS/LESS 的介绍 [打印本页]
作者: 宅男-兜着走    时间: 2013-5-1 07:21 PM
标题: [浅谈]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 代码。

虾米意思呢？？


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

  2. body{
  3.    font-family : arial;
  4.    background: #FFF;
  5. }

  7. .nav{
  8.   background : #333;
  9.   -webkit-border-radius: 4px;
  10.   -moz-border-radius: 4px;
  11.   border-radius: 4px;
  12. }

  14. .nav li{
  15.    padding:20px;
  16. }

  18. .nav li a{
  19.    background : #444;
  20.    color : #FFF
  21.    text-decoration:underline;
  22. }

  24. .nav li a:hover{
  25.      text-decoration:none;
  26. }



  30. .footer{
  31.   background : #333;
  32. }

  34. .menu{
  35.    float:left;
  36.    font-weight:bold;

  38.      background : #333;
  39.   -webkit-border-radius: 4px;
  40.   -moz-border-radius: 4px;
  41.   border-radius: 4px;
  42. }


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

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

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

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

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


  3. @cBackground: #333; // com background 的变量
  4. @radius : 4px; //统一圆角的变量

  6. body{
  7.    font-family : arial;
  8.    background: #FFF;
  9. }

  11. .nav{
  12.   background : @cBackground;
  13.   border-radius(@radius); // border radius 的mixin， 能支持 IE9, FF, CHROME, SAFARI

  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. }


  30. .menu{
  31.    float:left;
  32.    font-weight:bold;
  33.    .nav(); //自动复制 nav class 的属性。
  34. }

  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。







祝大家劳动节快乐！



欢迎光临 JBTALKS.CC (https://mobile.jbtalks.cc/) Powered by Discuz! X2.5