less的使用

一.  koala 的下载与安装及配置

1. 下载地址http://koala-app.com/index-zh.html

2. 打开 koala 软件，点击"+"可以选择文件夹，选择的文件夹里需要预先准备一个 less 文件，且仅仅只需要准备 less 文件，当添加了这个文件夹后，koala 会根据 less 文件的名称在同一目录下自动添加一个 css 文件。

3.  在 html 中引入的依然是 css 文件，只不过我们一旦选用 less 编写样式了，以后维护就是维护 less 文件。

二. 编写less

1.less中的注释

less中注释可以使用"//......",这个注释不会被编译到css文件中，也可以使用/*xxxxx*/的注释方式，这种注释方式会被编译到css文件。

2.变量

定义变量：@box-width:100px;

使用变量  a{width:@box-width;}

定义变量的方法："@"加上变量名。

定义变量的好处：当需要更改样式中多处的值时，只需要更改变量的值，提高效率。

3.混合

使用less混合的功能就可以不用再html中

.border（@border-width:5px）{ border: @border-width solid red;}

.box{

      width: 100px;

      height: 100px;

     .border(1px)；

}

.box2{

     .box; //使用.box的样式

      margin:20px;

}

4.匹配模式

相当于JS里的if（但不完全是），满足条件后才能匹配(例如以下使用html制作三角形的例子)

.triangle(top,@w:5px,@c:red){

     border-width:@w;

     border-color:transparent transparent @c transparent;

     border-style: dashed dashed solid dashe;

}

.triangle(bottom,@w:5px,@c:red){    

     border-width:@w;    

     border-color:transparent transparent @c transparent;    

     border-style: dashed dashed solid dashe;

}

.triangle(@_,@w:5px,@c:red){    

      width: 0;

     height: 0;

     overflow:hidden;

}

5.运算

@height:20px;

p {height:@height-2;}

6.嵌套规则

 

       

 

less 文件样式：

.list{

      width:100px;

      li {width: 40px;}

      a {

          font-size:14px;

         &:hover{    //&代表它的上一层选择器

                   background: red;

                }

       }

      span {color: #ccc;}

}

7.@arguments变量

@arguments包含了了所以传递进来的参数，如果你不想单独处理每一个参数的话，你可以这样写：

.border-arg(@w:1px,@s:solid,@c:red;){

      border:@arguments;    //可以将所有参数都携带进去

}

.div{

    .border-arg(10px);

}

8.避免编译、!important

有时候我们需要输入一些不正确的css语法或less不认识的专有语法，这样我们可以在前边输入一个“~”,例如：width: ~'calc(100% - 10px)';

!important 关键字会为所有混合所带来的样式，添加！important，一般不加