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：函数的使用
1.原生css的一些不方便
我们经常书写的css：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee1 {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee2 {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们发现.bordered的定义在下面都会被使用到，如果我们在#ee1和#ee2能直接获取到.bordered会方便得多，类似如下的功能：
var .bordered={
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee1 {
color: #111;
.bordered
}
#ee2 {
color: red;
.bordered
}
可以通过他的名字去引用到样式，不过我们可能更需要他可以这样实现：
.bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
.width
}
.width{
width:20px;
.bordered
}
#ee1 {
color: #111;
.bordered
}
#ee2 {
color: red;
.bordered
}
css之间可以通过类名等互相调用，并且拿到的是其中的样式
2.less带来的优势
less为我们提供了这种处理办法，我们可以定义出通用和选择器和对应样式，并且其他选择器引用这个通用选择器名字就可以引入里面的样式；我们在这种通用选择器还可以设置参数，和函数一样，参数可以赋值给里面样式的取值
less文件：
/*最基本通用内容使用*/
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee1 {
color: #111;
.bordered;
}
#ee2 {
color: red;
.bordered;
}
/*带参数的使用*/
.width2(@w) {
width:@w;
}
#ee3 {
color: #111;
.width2("100px");
}
#ee4 {
color: red;
.width2("200px");
}
/*多个参数使用*/
.border3(@w,@sty,@color) {
border:@w @sty @color;
}
#ee5 {
color: #111;
.border3("1px","solid","#000");
}
#ee6 {
color: red;
.border3("3px","solid","#ccc");
}
/*多个参数通过arguments统一赋值*/
.border4(@w,@sty,@color) {
border:@arguments;
}
#ee7 {
color: #111;
.border4("1px","solid","#000");
}
#ee8 {
color: red;
.border4("3px","solid","#ccc");
}
css文件：
/*最基本通用内容使用*/
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee1 {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#ee2 {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
/*带参数的使用*/
#ee3 {
color: #111;
width: "100px";
}
#ee4 {
color: red;
width: "200px";
}
/*多个参数使用*/
#ee5 {
color: #111;
border: "1px" "solid" "#000";
}
#ee6 {
color: red;
border: "3px" "solid" "#ccc";
}
/*多个参数通过arguments统一赋值*/
#ee7 {
color: #111;
border: "1px" "solid" "#000";
}
#ee8 {
color: red;
border: "3px" "solid" "#ccc";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
arguments统一变量参数赋值，针对复合样式是非常有用的，不带参数处理，那就是完全引用样式了，带了参数，我们可以在使用通用样式名的时候去根据情况去赋值
3.less函数mixin的其他提供
：：：：：!important我们可以加上，这个优先权的设置在ie上有时候还是要用的
：：：：：在定义通用加参数我们可以认识默认值的，引用时不传入实际参数就会采用默认取值
less：
/*带参数的使用*/
.width2(@w:20px) {
width:@w;
}
#ee3 {
color: #111;
.width2()!important;
}
#ee4 {
color: red;
.width2("200px");
}
css：
/*带参数的使用*/
#ee3 {
color: #111;
width: 20px !important;
}
#ee4 {
color: red;
width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
三：嵌套使用
1.原生css的一些不方便
针对层级嵌套，我们原生css写法：
.box{height:200px;}
.box div{ width:300px;}
.box div a{ color:#0C9;}
我们会觉得选择器太多重复了，希望能实现如下的处理：
.box{height:200px;div{ width:300px;a{ color:#0C9;}}}
他的后代元素就放在定义里面
2.less带来的优势
less帮我们实现了这种免去重复选择器的功能
less文件：
.box{
height:200px;
div{
width:300px;
a{ color:#0C9;}
}
}
css文件：
.box {
height: 200px;
}
.box div {
width: 300px;
}
.box div a {
color: #0C9;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
3.less嵌套伪类和筛选处理
：：：：：：&的使用，我们看下面几种原生css写法
.box div a {
color: #0C9;
}
.box div a.fous {
width: 200px;
}
.box div a:hover {
color: #000;
}
伪类效果和筛选器的使用是非常常见的，伪类除了：hover还有：first：last：active等；
筛选的实现就是.a.b或者div.a或者div.a.b.c这种形式
less也为我们提供了支持，就是在选择器前加上 &，less文件：
.box{
height:200px;
div{
width:300px;
a{ color:#0C9;
&.fous{width: 200px;}
&:hover{color: #000;}
}
}
}
生成的css文件：
.box {
height: 200px;
}
.box div {
width: 300px;
}
.box div a {
color: #0C9;
}
.box div a.fous {
width: 200px;
}
.box div a:hover {
color: #000;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
在定义样式里面通过 & 我们就会把 &后面选择器升一级，并且紧跟在上一级后面形成新的定义
4.less嵌套媒体查询处理
原生css写法：
@media screen and (max-width : 500px) {
a{ color:#0C9;}
}
@media screen and (min-width : 501px) and (max-width : 1024px) {
a{ color:#000;}
}
@media screen and (min-width : 1024px) {
a{ color:#ddd;}
}
我们通过less去书写：
a{
@media screen and (max-width : 500px) {
color:#0C9;
}
@media screen and (min-width : 501px) and (max-width : 1024px) {
color:#000;
}
@media screen and (min-width : 1024px) {
color:#ddd;
}
}
对比原生其实优势不是很大，本来这就是个麻烦的东西，可以原谅
编译后的css：
@media screen and (max-width: 500px) {
a {
color: #0C9;
}
}
@media screen and (min-width: 501px) and (max-width: 1024px) {
a {
color: #000;
}
}
@media screen and (min-width: 1024px) {
a {
color: #ddd;
}
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
四.less系统函数的使用
这个就非常简单了，和说的一样就是用于计算和转化的，
系统函数手册地址：http://www.1024i.com/demo/less/reference.html
我们使用几个测试一下：
@aa:0.5;
.dd{height:percentage(@aa);}
@bb:0.8;
.ee{height:pow(@bb,2);}
编译后：
.dd {
height: 50%;
}
.ee {
height: 0.64;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
五.写一个小页面
html部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>less</title> <link rel="stylesheet" type="text/css" href="less.css"/> </head> <body> <div class="demo"> <div class="demo-header"> <span class="left">标题</span> <a href="#2" class="right">更多</a> </div> <div class="demo-con"> <a href="#2">1111111111</a> <a href="#2">22222222222</a> <a href="#2">33333333333</a> <a href="#2">4444444444</a> <a href="#2">555555555</a> </div> </div> </body> </html>
书写less：
.left{float:left;}
.right{float:right;}
@colorlink:#ddd;
@colorhover:#ffa;
.he50{
height:50px;
line-height:50px;
}
.demo{
width:500px;
height:500px;
.demo-header{
.he50;
span{
color:#000;
}
a{
color:@colorlink;
float:right;
margin:0 10px;
&:hover{color:@colorhover;}
}
}
.demo-con{
a{
display:block;
.he50;
color:@colorlink;
&:hover{color:@colorhover;}
}
}
}
转义后：
.left {
float: left;
}
.right {
float: right;
}
.he50 {
height: 50px;
line-height: 50px;
}
.demo {
width: 500px;
height: 500px;
}
.demo .demo-header {
height: 50px;
line-height: 50px;
}
.demo .demo-header span {
color: #000;
}
.demo .demo-header a {
color: #ddd;
float: right;
margin: 0 10px;
}
.demo .demo-header a:hover {
color: #ffa;
}
.demo .demo-con a {
display: block;
height: 50px;
line-height: 50px;
color: #ddd;
}
.demo .demo-con a:hover {
color: #ffa;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
很简单，不好看，最简单使用了嵌套，变量和函数通用处理，也可见得出项目越大的话使用会更加方便。
五.其他
我们只是最简单的使用和了解常用的方法，高级的都被去掉了，比如函数里面的处理，嵌套&的高级使用等
除了高级的其实还有外部文件引用等。