Less-学习笔记

这是less官网的介绍：

http://www.1024i.com/demo/less/document.html

大家都是在一起学习，最好的地方无疑就是官网，不过每个人学习方式和基础不同，以至于学完后掌握才会出现差异

开源中国提供了好的直接编译器：

http://tool.oschina.net/less

接下来就开始学习和了解less的使用和优势。

一.@：变量的使用

1.原生css的一些不方便

我们先看我们经常写的css：

.aa{ height:200px; background:#066;}
.bb{ height:200px; background:#066;}
.dd{ height:200px; color:#066;width:100px;}

我们发现，高度取值相同我们却要写3次，颜色取值也是要写多次，这时候如果css像语言一样，可以定义一个变量，这里面存放公用取值，假如能如下方式实现：

var hei1="200px";
var cor1="#066";
.aa{ height:hei1; background:cor1;}
.bb{ height:hei1; background:cor1;}
.dd{ height:hei1; color:cor1;width:100px;}

这样我们就会非常的方便，在书写css的时候同样取值应用变量就ok了。

2.less带来的优势

通过@在less中我们可以定义变量和赋值，并且被任何部分去引用，还可以二次定义替换和后定义被引用

less文件：

/*最基本变量声明*/
@nice-blue: #5B83AD;
#dd1 { color: @nice-blue; }
/*变量内容加法操作*/
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#dd2 { color: @light-blue; }
/*变量互相引用*/
@w10: "10px";
@10: ‘w10‘;
@content: @@10;
#dd3 { width: @content; }
/*变量的作用域和二次赋值*/
@var: "10px";
#dd4 {
    @var: "20px";
    #dd5 {
        @var: "30px";
        width: @var;
        @var: "40px";
    }
    width: @var;
}
/*变量可按需去查找*/
#dd6 {
    width: @ww;
}
@ww: "200px";

 编译后css文件：

/*最基本变量声明*/
#dd1 {
  color: #5B83AD;
}
/*变量内容加法操作*/
#dd2 {
  color: #6c94be;
}
/*变量互相引用*/
#dd3 {
  width: "10px";
}
/*变量的作用域和二次赋值*/
#dd4 {
  width: "20px";
}
#dd4 #dd5 {
  width: "40px";
}
/*变量可按需去查找*/
#dd6 {
  width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

 每一次注释下都是一种用法，

个人感觉相互引用和二次赋值我们用的不会太多，用起来似乎麻烦了，

在二次定义中我们发现了编译css的时候，{]作为作用域，同样遵循可以访问到外侧和当前层变量的设置，并不能访问到同级内部变量的设置。

一：Mixins：

Less-学习笔记

原文：http://my.oschina.net/u/2352644/blog/517981