学习笔记-Less
Less
Less is More ,Than CSS-少即是多，比CSS
什么是Less？
- LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
- LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
- LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
- 可以通过使用LESS 变量来实现更快的维护。
Less发展历程
Less由 Alexis Sellier 于2009年设计。LESS是一个开源。 LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。
Less特征 - 更清晰和更可读的代码可以以有组织的方式编写。
- 我们可以定义样式，它可以在整个代码中重复使用。
- LESS是基于JavaScript的，是超集的CSS。
- LESS是一个敏捷工具，可以排除代码冗余的问题。
Less优点 - LESS轻松地生成可在浏览器中工作的CSS。
- LESS能够使用嵌套编写更干净，组织良好的代码。
- 通过使用变量可以更快地实现维护。
- LESS能够通过在规则集中引用它们来轻松地重用整个类。
- LESS提供使用操作，使得编码更快并节省时间。
Less缺点 - 学习如果是新的CSS预处理需要时间。
- 由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
- 与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。
Less类似于Jquery （是CSS的一个库）
LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它类似于CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS编写和维护
编译工具 - Koala编译
- 国人开发SASS/LESS编译工具
- 下载地址：http://koala-app.com/index-zh.html
- Nodejs库
- 浏览器端使用
Koala的基本使用
Less中的注释
LESS的注释：
/* 内容是被编译的，保留进.CSS文件中 */
// 内容不被编译，不出现在.CSS文件中
变量
//声明变量，以@开头，如：@变量名：值;
@w: 500px;
@h: 300px;
.box {
width: @w;
height: @h;
}
混合
不带参数(引用时可不带()括号)：
声明， .bd_radius{}；引用，.box{ .bd_radius }
带参数(引用时必须带()括号)：
① 声明，.bd_radius(@radius){ border-radius: @radius; }
引用，.box{ .bd_radius(5px); }——必须带参数
默认带值
.bd_radius(@radius:10px){ border-radius: @radius; }
匹配模式
- 相当于JS中的if,但不完全是
- 满足条件后才能匹配
兼容ie低版本（border-style: dashed）css三角
.triangle(top, @w:5px, @c:#ccc){...}
.triangle(bottom, @w:5px, @c:#ccc){...}
.triangle(left, @w:5px, @c:#ccc){...}
.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(right, 100px); }
编译后css：
.sanjiao {
width: 0,
height: 0,
overflow: hidden;
border-width: 100px;
border-color: transparent transparent transparent #ccc;
border-style: dashed dashed dashed solid;
}
运算
可以进行加减乘除运算，只要有一个带像素的即可， 符号两边需要空格
Less中的运算
@test_01:300px;
.box_02{
width:@test_01 + 20;
height: (@test_01 - 200) * 5;
background:#ccc - 10;
}
嵌套规则
Less嵌套：CSS中选择器的另一种变形，通过CSS选择器的相互嵌套完成到CSS层次选择器的转换。其中 & 代表它的上一层选择器，适用场景，伪类。
嵌套越多，匹配次数越多，影响加载
& 代表上一层选择器
.list {
li { ... }
a {
color: blue;
&:hover { color: red; }
}
span { ... }
}
@arguments变量
终究还是变量，顾名思义，代表多个参数，适用场景，同一个CSS样式属性对应多个属性值，例如border:1px solid pink;如果属性值以参数方式传递，就可以使用@arguments代替对应参数。如何引用？和以往一样，传参时要对应传参，中间可以用",“或者”;"隔开，如果少传，则按顺序匹配。
@arguments 代表所有传递进来的参数
.border (@w:1px, @s: solid, @c: red) {
border: @arguments;
}
引用：
.test_border {
.border(20px);
}
编译后css：
.test_border {
border: 20px solid red;
}
##避免编译、!important以及总结
1 避免编译
- 有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法。
- 要输出这样的值我们可以在字符串前加上一个~
例如：width:~‘calc(100% - 35)’
~’…’
~"…"
2 !important关键字，会为所有混合所带来的样式，添加上!important
!important 样式优先级别最高。
更多资料
- Less中文网站
- http://lesscss.net
- 中文旧版网站：http://old.lesscss.net/article/document.html