less是什么
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
使用less
Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考 多种用法
这里推荐使用的是一款国产的开源预处理语言图形编译工具Koala, 因为是有中文版而且使用起来简单,Koala是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。
在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。
其他配置使用注意事项等等,去Koala官网查看相关文档, 都有很详细说明, 这里主要记录学习less的语法.
声明文档格式
编写less时, 首先要在在less文件顶部声明文档格式
@charset "utf8";
注释
/* 我是注释 */ 在less文件和css文件中都会显示
// 我是注释 不会在css文件中显示, 在less中显示
变量
less中声明变量必须使用@开头, 例如@变量名: 值;
//less文件
@test_width:300px;
.box {
width:@test_width;
}
编译成css文件之后 :
//css文件
.box {
width: 300px;
混合
我理解为把之前声明过的样式当做变量使用, 可提高代码复用, 提升效率.
//less文件
.box1 {
width:300px;
height:300px;
background:#0f0;
}
.box2 {
.box; //代替了类名为box1的全部样式声明
margin: 10px;
}
编译成css文件之后 :
//css文件
.box1 {
width:300px;
height:300px;
background:#0f0;
}
.box2 {
width:300px;
height:300px;
background:#0f0;
margin: 10px;
}
默认带值:
//less文件
.border(@border_width:10px) { //如声明了10px, 那么没传参数的话默认显示就是10px
border: solid pink @border_width;
}
.box1 {
.border(); //没有传参数
.border(30px); //传入了参数
编译成css文件之后:
//css文件
.box1 {
border: solid pink 10px; //显示默认值
border: solid pink 30px; //显示传入参数的值
}
举个减少代码量的栗子,一些css3属性要做兼容, 用的多的样式用混合之后就轻松了.
//less文件
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box1 {
.border_radius();
编译成css文件之后:
.box1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
其他地方要用到不同的圆角弧度, 只需在.border_radius();中传入需要的值就OK
匹配模式
在使用的时候传入事先定义好声明的值就可以了, 举个栗子, 遇到用css写三角形的情况, 用匹配模式-匹配三角形, 只需传入方向和宽度.
//less文件
//声明上右下左四个方向的三角
.triangle(top,@w:5px,@c#ccc) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c#ccc) {
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c#ccc) {
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(bottom,@w:5px,@c#ccc) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
//无论选择上面哪一个, 始终会把下面这个表达式里的声明带上
.triangle(@_.@w:5px.@c:#ccc){
width:0;
height:0;
overflow:hidden;
.sanjiao {
.triangle(bottom, 100px); //匹配传入的参数, 不传参数会显示默认的
}
编译成css文件之后:
//css文件
.sanjiao {
border-width:100px;
border-color: #cccccc transparent transparent transparent;
border-style: solid dashed dashed dashed;
width:0;
height:0;
overflow: hidden;
}
匹配模式-定位
一个使用匹配模式, 匹配定位的例子.
//less文件
.pos(r) {
position: relative;
}
.pos(a) {
position: absolute;
}
.pos(f) {
position: fixed;
}
.box1 {
width:300px;
height:300px;
background-color: #ccc;
.pos(r); //传入需要匹配的参数
}
编译成css文件之后:
.box1 {
width:300px;
height:300px;
background-color: #ccc;
position: relative;
}
运算
在less中的运算, 任何数字, 颜色,或者变量都可以参与运算+ - * /, 运算应该包裹在括号中.
//less文件
@test_width:300px;
.box {
width: (@test_width - 20)*5; //先减后乘
color: #ccc - 10; //用得少
}
编译成css文件之后:
.box {
width: 1400px; //运算后的结果
color: c2c2c2; //颜色会变淡
}
嵌套规则
和写HTML代码类似, 直接上代码:
//html文件
//less文件
.list {
width:600px;
margin: 30px auto;
padding: 0;
list-style: none;
li {
height: 30px;
line-height: 30px;
background_color: #ccc;
margin-bottom: 5px;
}
a {
float: left;
&:hover { //&代表的是父元素
color: red;
}
}
span {
float: right;
}
}
注意其中&代表的是父元素,编译成css文件之后:
.list {
width:600px;
margin: 30px auto;
padding: 0;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
background_color: #ccc;
margin-bottom: 5px;
}
.list a {
float: left;
}
.list span {
float: right;
}
@arguments
类似于形参, 代替多个值, 编译后的值为传入的实参, 如没有传参,则编译为默认值.
//less文件
.border(@w:30px,@c: yellow,@xx:solid) {
border: @arguments; //可代替上面括号内三个参数
.box {
.border(70,red,dashed); //传入你需要的参数用逗号分隔, 不传表示默认
}
编译成css文件之后:
//css文件
.box {
border: 70px #ff0000 dashed;
避免编译
有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法, 要输出这样的值用''/""包裹, 然后再前面加上~
例如width:~'calc(300px - 30px)';
//less文件
.box {
width: calc(300px - 30px);
}
编译成css文件之后:
//css文件
.box {
width: calc(300px - 30px);
}
这样不需要编译的时候, 也可以很好的解决.
!important
作用是增加优先级, 一般不用, 影响性能.
//less文件
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box1 {
.border_radius() !important; //添加了!important
编译成css文件之后:
.box1 {
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;