Less：CSS预处理语言快速入门以及浏览器中使用

Less css预处理语言
特性：变量、继承、运算、函数
http://lesscss.cn/

编译器

1、koala
http://koala-app.com/index-zh.html
https://github.com/oklai/koala

2、sublime插件

less       # 语法高亮
less2css   # 保存自动生成同名的css文件

需要安装node环境+node插件

npm install -g less
npm install -g less-plugin-clean-css 

报错：

less2css error: `lessc` is not available

重启sublime

配置保存时不进行压缩

{
  "minify": false
}

语法

1、注释

/**/  # css中的注释
//    # 编译时会被自动过滤

2、变量
以@开头，例如：

@变量:值;

@text_with: 200px;

.box{
    width: @text_with;
    heigth: @text_with;
    background-color: yellow;
}

编译结果

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

3、混合
类似其他语言中的函数

.border{
    border: solid 5px pink;
}

.box-border{
    .border;
    width: 200px;
    height: 200px;
    background-color: green;
}

编译结果

.border {
  border: solid 5px pink;
}

.box-border {
  border: solid 5px pink;
  width: 200px;
  height: 200px;
  background-color: green;
}

4、混合带参数

.box{
    width: 200px;
    height: 200px;
    background-color: yellow;
    .border(green);   // 混合
}

.border(@color){
    border: solid 5px @color;
}

编译结果

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: solid 5px green;
}

5、混合默认参数

.box{
    width: 200px;
    height: 200px;
    background-color: yellow;
    .border();   
}

.border(@color: 10px){
    border: solid 5px @color;
}

编译结果

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: solid 5px 10px;
}

6、混合示例

.box{
    width: 200px;
    height: 200px;
    background-color: green;
    .border-radius()
}

.border-radius(@radius: 5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

编译结果

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

7、匹配模式
类似其他语言中的if语句

@charset "utf-8";

.box-line(top, @boder-width:5px){
    border-top: solid @boder-width red;
}

.box-line(bottom, @boder-width:5px){
    border-bottom: solid @boder-width red;
}

.box-line(left, @boder-width:5px){
    border-left: solid @boder-width red;
}

.box-line(right, @boder-width:5px){
    border-right: solid @boder-width red;
}

// 不管匹配到谁，以下样式都会被输出
.box-line(@_, @boder-width:5px){
    background-color: green;
    width: 200px;
    height: 200px;
}

.box{
    .box-line(right)
}

编译结果

@charset "utf-8";

.box {
  border-right: solid 5px red;
  background-color: green;
  width: 200px;
  height: 200px;
}

8、运算
支持 + - * /

@default-width: 20px;

.box{
    width: @default-width + 20;
}

编译结果

.box {
  width: 40px;
}

9、嵌套

.list{
    list-style: none;
    width: 500px;
    margin: 30px auto;

    li{
        height: 20px;

    }

    a{
        float: left;

        // & 表示上一层选择器
        &:hover{
            color: red;
        }

    }

}

编译效果

.list {
  list-style: none;
  width: 500px;
  margin: 30px auto;
}

.list li {
  height: 20px;
}

.list a {
  float: left;
}

.list a:hover {
  color: red;
}

10、@arguments
获取所有参数

.box{
    .border-color();
}

.border-color(@width: 30px, @color: red){
    border: solid @arguments;
}

编译效果

.box {
  border: solid 30px red;
}

11、避免编译

.box{
    height: calc(20px + 10px);
    // 避免编译
    width: ~'calc(20px + 10px)';
}

编译效果

.box {
  height: calc(20px + 10px);
  width: calc(20px + 10px);
}

12、!important

.box{
    height: 20px !important;
}

编译效果

.box {
  height: 20px !important;
}

12、文件导入
hi.css

.hi{
    height: 20px;
}

hello.less

.hello{
    width: 20px
}

main.less

// 引入less文件
@import "hello";

// 引入 css文件
@import "hi.css";

// 引入 css文件 转为 less
@import (less) "hi.css";

编译效果
main.css

@import "hi.css";
.hello {
  width: 20px;
}
.hi {
  height: 20px;
}

在浏览器中直接使用

style.less

/* less内容 */

index.html

  <link rel="stylesheet/less" type="text/css" href="style.less" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>