第二课 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.碰到文字，一定要测量行高，不然高度会不准确；

　　　　标签的特性需要熟记于心。