前端开发工具less入门

75 阅读 0 评论 50 点赞

我是靠谱客的博主粗暴芒果，最近开发中收集的这篇文章主要介绍前端开发工具less入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ess就是相当于jQuery

less css属于动态样式语言，属于css预处理的一种，他的语法类似于css，为css赋予了动态语言的特性，使得css能够定义变量，函数继承与运算，使得css更加方便维护和管理；

1.less 里面的注释

less里面和编程语言一样有注释，分为两种

1. // 这种注释只是在less里面可以看见的不会再编译完之后的css文件里面看见

2./* */ 这种注释可以编译并且能在编译完的css文件里面看见。

2.less里面的变量

变量的声明 //声明变量@+变量名+：+变量的值+；

例如：

@test : 300px;
body{
background: red;
div{
height: @test;
width: @test;
ul{
background: blue;
li{
line-height: 20px;
}
}
}
}

3.less里面的混合

3.1 普通的混合（不带参数）

.box1{
width: 300px;
height: 300px;
background: red;
}
.box2{
margin-left: 400px;
.box1;
//直接用了.box1 使得box1里面的所有样式拷贝到了box2里面
}

编译后的样式为

.box1 {
width: 300px;
height: 300px;
background: red;
}
.box2 {
margin-left: 400px;
width: 300px;
height: 300px;
background: red;
}

3.2带参数的混合

.box1(@act_width,@act_height){
//能接受两个参数一个是实际的宽度一个是实际的高度
width: @act_width;
height: @act_height;
background: red;
}
.box2{
margin-left: 400px;
.box1(100px,100px);
}

编译后的代码是这样的

.box2 {
margin-left: 400px;
width: 100px;
height: 100px;
width: 300;
height: 300px;
background: red;
}

就不会出现box1了

这样的话就不会有box1的样式了，但是3.1那样就会有box1的样式

需要注意的是一下的写法是会出现编译错误的

bor(@act_px){
border:@act_px solid blue;
}
.box2{
margin-left: 400px;
.box1(100px,100px);
bor(8px);
}

是因为最后一行的bor前面什么也没有回编译失败最好把bor写为class或者id的形式（前面加.或者#号）

3.3混合中的默认

混合中的参数如果不用特殊说明德话是可以选择默认的；

语法是：变量名+：+默认值

.box1(@act_width,@act_height){
//能接受两个参数一个是实际的宽度一个是实际的高度
width: @act_width;
height: @act_height;
background: red;
}
.bor(@act_px:5px){
border:@act_px solid blue;
}
.box2{
margin-left: 400px;
.box1(100px,100px);
.bor(8px);
}
.box{
.box1(100px,100px);
.bor();
}

4.匹配模式

匹配模式就是相当于一般的编程语言中的if判断。（本人觉得也相当于c++里面的重载）

比如说写一个页面三角的个数是十分多的，但是一个三角形的代码也是比较长的，例如下面这个向上的三角形

.tri{
width: 0px;
height: 0px;
overflow: hidden;;
border-color: red transparent
transparent transparent;
border-style: solid dashed
dashed dashed;
//把其余的部分设置为虚线（dashed）是为了兼容IE6
border-width: 10px;
}

这研究可以用匹配模式了

语法和普通的定义一个混合一样，不过第一个参数是进行醒匹配的字符串（或者叫变量），后面的是参数列表

例如下面的顶一个三角的四个方向

.triangle(top,@c:red,@w:10px){
border-color: transparent
transparent @c transparent;
border-style: solid dashed
dashed dashed;
border-width: @w;
}
.triangle(bottom,@c:red,@w:10px){
border-color: @c transparent transparent transparent;
border-style: dashed
dashed solid dashed;
border-width: @w;
}
.triangle(left,@c:red,@w:10px){
border-color: transparent @c transparent transparent;
border-style: dashed solid
dashed dashed;
border-width: @w;
}
.triangle(right,@c:red,@w:10px){
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
border-width: @w;
}

第一个匹配的参数是上下左右

下面的这一行就是使用这个

.tri{
.triangle(right,blue,15px)
}

第一个参数进行匹配的参数(比如我后面写的是right及时调用right这个模式)，然后后面就是参数列表
当使用匹配模式的时候会自动的调用一个匹配模式

.triangle(@_,@c,@w){
width: 0px;
height: 0px;
overflow: hidden;
}

第一个参数是@_是语法需要必须写的，后面和元匹配模式的参数列表的参数也是要相同的，当然也是可以增加参数的

例如

.triangle(@_,@c,@w,@h:500px){
width: 0px;
height: 0px;
margin-left: @h;
overflow: hidden;
}

像这样的话其他的没有第四个参数但是这个自动调用的匹配模式有，只能把多余的参数设置为默认的，因为调用的时候不是调用时候参数列表中没有这个参数

5.less中的运算

less中是支持基本运算的

@a:100px;
@b:200px;
.operation{
width: @b -10;
}

在@b（也就是定义的变量后面要加上一个空格或者给这个变量加上括号），否则的话会识别为变量

6.less中的嵌套

当我们写HTML的时候通常是采用胶套的格式，但是给他们写样式的时候

比如 div ul li{}

就像是下面代码这样

.test {
width: 400px;
}
.test ul li {
float: left;
cursor: pointer;
width: 100%;
height: 25px;
line-height: 25px;
background: #ccc;
margin-top: 5px;
}
.test ul li:hover {
background: red;
}

用less就可以像写HTML那样使用嵌套的格式

代码这样和上面那样是一样的效果

.test{
width: 400px;
ul{
li{
float: left;
cursor: pointer;
width: 100%;
height: 25px;
line-height: 25px;
background: #ccc;
margin-top: 5px;
&:hover{ //表示的是它上一层的选择器
background: red;
}
}
}
}

同样是实现了下面的效果

7.less中arguments变量

arguments变量一般不常用只是在批量更改变量的时候使用

就如下面这样

.border(@px:8px,@sty:solid,@bac:red){
border:@px @sty @bac;
}

这样就可以写为这样

.border(@px:8px,@sty:solid,@bac:red){
border:@arguments;
}
.argument_test{
.border();
}

也可以给.border里面传递参数也就进行相应的改变了，

8.less中避免编译

有的时候我们写的代码是需要浏览器去编译的，比如运算还有微软的滤镜等

必须下面的这个运算

.avoid{
width: calc(@b - 20);
}

编译之后会变为

.avoid {
width: calc(180px);
}

我们不希望这个进行编译

语法取反符号（~）+‘’（双引号或者单引号）里面是不想被编译的东西

就如这样

.avoid{
width: ~'calc(@b - 20)';
}

编译之后就会变为这样

.avoid {
width: calc(@b - 20);
}

9.！important的使用

在使用中混合的时候使用；

.box2{
margin-left: 400px;
.box1(100px,100px);
.bor(8px);
}
.impor{
.box2()!important;
}

就会编译成一样的格式

.impor {
margin-left: 400px !important;
width: 100px !important;
height: 100px !important;
background: red !important;
border: 8px solid #0000ff !important;
}

基本上也就这么多东西了。

使用less的过程很简单

1.下载一个koala（http://koala-app.com/index-zh.html）

2.创建一个.less文件

3.打开koala之后进入主界面如下