LESS框架笔记

LESS CSS框架

LESS是动态的样式表语言。本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解释器，编译生成对应的CSS文件。

LESS可以直接在客户端使用，也可以在服务端使用。实际开发中推荐第三种方式，将LESS文件编译生成静态CSS文件，并在HTML文档中应用。

客户端：

从 http://lesscss.org下载less.js文件，然后再需要引入LESS源文件的HTML中加入如下代码：

<link rel="stylesheet/less"type="text/css" href="styles.less">

注意：rel属性要设置为stylesheet/less，LESS源文件一定要在lesss.js引入前引入。

服务器端：

LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成的最终CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS。

项目开发初期可以用importing关键字引入。

LESS完全兼容CSS语法。

 

语法

允许开发者自定义变量，变量可以在全局样式中使用。

@border-color : #b5bcc7;

 

 .mythemestableBorder{

   border : 1pxsolid @border-color;

 }

变量生命周期：先局部后全局。

 

Mixins（混入）

在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

.roundedCorners(@radius:5px) {

 -moz-border-radius:@radius;

 -webkit-border-radius: @radius;

 border-radius:@radius;

 }

 // 在另外的样式选择器中使用

 #header {

 .roundedCorners;

 }

 #footer {

 .roundedCorners(10px);

 }

像JavaScript中的arguments一样，Mixins也有@arguments，表示所有的变量。

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){

 -moz-box-shadow:@arguments;

 -webkit-box-shadow: @arguments;

 box-shadow:@arguments;

 }

 #header {

 .boxShadow(2px,2px,3px,#f36);

 }

 

命名空间

#mynamespace { 

 .home {...} 

 .user {...} 

 }

#mynamespace > .user

 

嵌套的规则

书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的

html文件：

<div id="home">

 <divid="top">top</div>

 <divid="center">

 <divid="left">left</div>

 <divid="right">right</div>

 </div>

 </div>

    less文件：

#home{ 

   color : blue; 

   width : 600px; 

   height : 500px; 

   border:outset; 

   #top{ 

        border:outset; 

        width : 90%; 

   } 

   #center{ 

        border:outset; 

        height : 300px; 

        width : 90%; 

        #left{ 

          border:outset; 

          float : left; 

  width : 40%; 

        } 

        #right{ 

          border:outset; 

          float : left; 

  width : 40%; 

        } 

    } 

 }

 

运算及函数

@init: #111111;

 @transition:@init*2;

 .switchColor {

 color: @transition;

 }

 

lighten(@color, 10%); // return a color which is 10%*lighter* than @color

 darken(@color,10%); // return a color which is 10% *darker* than @color

 saturate(@color,10%); // return a color 10% *more* saturated than @color

 desaturate(@color,10%);// return a color 10% *less* saturated than @color

 fadein(@color,10%); // return a color 10% *less* transparent than @color

 fadeout(@color,10%); // return a color 10% *more* transparent than @color

 spin(@color, 10);// return a color with a 10 degree larger in hue than @color

 spin(@color, -10);// return a color with a 10 degree smaller hue than @color

 

init: #f04615;

 #body {

  background-color:fadein(@init, 10%);

 }

 

Comments（注释）

注释方法与JavaScript一样，强调：单行注释//不能显示在编译后的CSS中。

 

同类框架还有SASS，相比之下LESS更接近CSS语法。https://gist.github.com/674726