LESS入门1

LESS和SASS是CSS的预编译语言，不过一直以为比较复杂，需要花费不少时间，以至于没有学习，真正下决心一览乾坤之后，发现真的是既方便又简单，比Javascript简单一万倍。把自己学习记录下来的笔记与大家分享一下，希望大家都能迅速掌握。bootstrap早期是使用less来编写的，不过随着sass越来越流行，bootstrap也给出了sass版本。而compass则是sass编写的框架。less相对来说更加简单，更加容易掌握。本着由浅入深的原则，先介绍LESS.

LESS是一种动态样式语言，属于CSS预处理语言的一种，使用类似CSS的语法，为CSS赋予了动态语言的特性，如：变量、继承、运算、函数等，更方便CSS的编写和维护。

编译工具推荐使用：Koala编译
下载地址: koala-app.com/index-zh.html
除了工具编译，还可以使用命令行编译和自动化编译。这在后面的SASS中会提及。

less的注释和css类似，区别在于/**/注释，编译之后，会在CSS中保留，而//注释，不会被编译到CSS中。

使用import向less中导入css或less文件：

@import "index"    //导入less文件 不需要加.less
@import (less) "index.css" // 导入css文件

less中声明变量一定要用@开头。例如: @变量名:值。

@test_width:300px;
.box{
    width: @test_width;
    height: @test_width;
}

编译出来的CSS为：

.box{ width: 300px; height: 300px; }

变量的定义在使用中极为有用，尤其是项目的颜色，宽高。

混合-Mixin
混合(mixin)变量
例如: .border{border:solid 10px red;}
带参数的混合
.border-radius(@radius){css代码}
可设定默认值
.border-radius(@radius:5px){css代码}

不带参数的混合

@test_width:300px;
.box{
    width: @test_width;
    height: @test_width;
    .border;    //相当于将border属性定义在了.box中
}
//混合
.border{
    border:5px solid pink;
    margin:5px solid blue;
}

编译后的CSS：

.box { width: 300px; height: 300px; border: 5px solid pink; margin: 5px solid blue; }
.border { border: 5px solid pink; margin: 5px solid blue; }

混合带参数

.border_02(@border_width){
    border: @border_width solid yellow;
}
.test_mixin{
    .border_02(30px);
}

编译出来的CSS为:

.test_mixin{ border: 30px solid yellow; }

混合带默认值

//混合带默认值
.border_03(@border_width:10px){
    border:@border_width solid red;
}
.test_mixin_03{
    .border_03();//不传值直接写空括号
}

编译出来的CSS为：

.test_mixin_03 { border: 10px solid #ff0000; }

.boder_radius(@radius:5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.radius_test{
    width:100px;
    height:40px;
    .boder_radius(10px);
}

编译后的CSS为：

.radius_test { width: 100px; height: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }