Css编译之Less入门

为什么要有预处理CSS?

css写起来比较费事，而且代码难以维护 , 后来，就有了让CSS加入一些编程的元素，像其他程序语言一样可以做一些预定的处理，这就是 CSS预处理器( CSS Preprocessor )

less.js的工作原理： 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件)，然后按照自己的语法解析，生成对应的CSS然后加在页面中。

注意事项：
1. 先引入我们自己编写的less文件
2. 再引入我们的less.js文件
3. 但是我们在生产环境下，我们引入页面的是css,而非less文件，因为如果让css在浏览器端编译，那么会使浏览器端响应变慢，这种是不可取的，所以我们都是编写好less文件后，在本地编译成css文件，最后引入页面。

下面来看下less的一些基础的东西

---

变量的定义

• 使用 @+变量名 的方式来定义一个变量

• 举例：

  // 定义变量
  @containerWidth: 1200px; 
  @border:1px solid #000;
  // 使用变量
  .con{
     width: @containerWidth;
     border:@border;
  }
  

注释

在Less 中也可以有注释，分为单行注释，和多行注释。

• 单行注释：

// 单行注释 ,注 less 在编译过程中会忽略掉。

• 多行注释：

/*!
* 也可不用叹号，叹号的作用，不会再压缩的时候被去除。用于声明版权。
*/

嵌套语法

嵌套的作用是后代嵌套，如果需要直接子代嵌套，那么我们需要使用&代表父元素 格式为 &>子元素{}& 在一个作用域中只能用一次，不能这样写 &>& ，因为&只有一次，&后面是没有&。

• 举例：

@containerWidth: 1200px; 
// 正确的嵌套和&用法
.con{
    width:@containerWidth;
    ul{
        width:200px;
        p{
            width:100px;
            a{
                color:#f40;
                &:hover{
                    color:blue;
                }
            }
        }
    }
}

// 正确使用 &
.box{
    // li 是 .box 的直接子代
    & > li{
        color:#fff;
    }
    // p 是 .box 是后面的兄弟元素
    & + p{
        color:red;
    }
    // div 是 .box 的后代 div
    div{
        color:blue;
    }
}

// 错误的使用&
.box{
    ul{
        // 此处&代表的是ul,但是ul后面的ul不能这样表示，&一次只能表示一次。不知道这样表述对不对...
        & + &{ 
            width:100px;
        }
    }
}

Minin 混合

像函数一样来传递参数，如果没有传参，则按照定义的默认的来。

• 示例：

// 定义一个类
.roundedCorners(@radius:5px;){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}

// 应用一个类
#header{
    .roundedCorners(10px);
}
#footer{
    .roundedCorners;
}

Import 导入

less 支持多个其他的less文件的导入一个less文件。我们约定 以_为开头的文件，是可以被导入的。

• 示例：

// 在主less文件中 导入其他三个less文件， 举例如下：
@import url('_other1.less');
@import url('_other2.less');
@import url('_other3.less');

函数

• 内置函数

  • lighten ： 将一个颜色变亮
    示例： lighten(#000 ,10%) ; // rgb 三个值都是0 ，都增多10% (255的10%,四舍五入，26 ，转换成16进制：就变成了1a1a1a)。在bootstrap定制的时候，能够看到这种函数。

  • 更多函数 ： http://lesscss.cn/functions/

更多内容，移步至：

less 中文网 学习地址： http://lesscss.cn/
更多阅读： http://www.1024i.com/demo/less/