第二课 less的学习以及移动端需要注意的问题
一、LESS的学习笔记：
1.less介绍：一种动态样式语言。less将css赋予了动态语言的特性，如变量，继承，运算，函数，less既可以在客户端上运行（支持IE6+，webkit，firefox），也可以借助node.js或者Rhino在服务端运行。less的中文文档，可以参照这两个地址进行学习：http://less.bootcss.com/ http://www.bootcss.com/p/lesscss/
2.less的安装
法一：安装iterm或者使用终端都可以，然后输入sudo npm install -g less (mac系统下)
法二：去官网下载引用
3.辅助编译软件koala http://koala-app.com/index-zh.html
4.注释
/*代码*/ 会被编译的
// 不会被编译的
5.变量
定义变量的方法：@变量名：值；如：@test-width:300px;.box{width:@test-width;}
6.混合
可以混合使用css样式，如在less文件中可以这样写：
.border{border:solid 5px pink;}
.box{.border;width:300px;height:300px;}
另外，混合是可以带参数的，如：
.border_02(@border_width){border:solid yellow @border_width;}
.test_hunhe{.border_02(30px);}
而且，混合还可以带默认值，如：
.border_03(@border_width:10px){border:solid yellow @border_width;}
.test_hunhe_03{.border_03();}
(在这种情况下，()内不填值，即使用默认值，()内如果填值，则显示需要填写的值，如.border_03(20px);)
混合的例子：
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.radius_test{
width:100px;
height:100px;
background-color:green;
.border_radius;
}
7.匹配模式
相当于js中的if，但不完全是，满足条件后才能匹配，例如（三角形）：
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.triangle(top,100px);
}
例子：定位
.pos(r){position:relative;}
.pos(a){position:absolute;}
.pos(f){position:fixed;}
.pipei{
width:200px;
height:200px;
background-color:green;
.pos(r);
}
8.运算
@test_01:300px;
.box_02{
width:(@test_01-20)*5;
color:#ccc-10;
}
9.嵌套规则
两种方法：& 对伪类使用，-hover或focus；对连接使用，-&-item，例如：
html层：
<ul class="list"><li><a></a><span></span></li></ul>
css less层：
.list{
width:600px;
li{height:30px;}
a{float:left;}
span{float:right;}
}
例子：伪类的写法
a{float:left;
&:hover{color:red;}}
&代表他的上一层选择器
10.arguments变量
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);
}
11.避免编译 !important及总结：
避免编译：有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法。要输出这样的值，我们可以在字符串前加上一个~ 例如：width:~'calc(100%-35)'
!important关键字：会为所有混合所带来的样式，添加上!important
二、总结：
（1）通过less设置字体，并进行全局计算的方法；
条件：PSD稿为640px，通过动态设置html字体大小，得出html字体为40px;
定义变量：@rem:40px;
使用：如果某个字体/宽/高在PSD稿上为20px,则可以设置为20/@rem;
（2）清除浮动样式：
.clearfix:after{
contant:"";
display:block;
clear:both;
}
使用在应用了float的父级元素上面。
（3）移动端需要注意的问题
a.固定定位（fixed）元素内容中，如果有input元素的话，当获取焦点触发键盘之后会导致定位错误的情况发生；
b.不管使用北京图还是img，一定要调整对应的size（大小）background-size属性，如果图片大小和容器大小一致，则可以使用100%，如果不一致，则针对图片分别设置宽高；
c.碰到文字，一定要测量行高，不然高度会不准确；
标签的特性需要熟记于心。
