LESS框架应用的初步学习

LESS框架

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

语法

变量
使用@符号开始,@符号后面为变量名，可以自行命名：

@border-color:red;
table{
border:1px solid @border-color;
    }

变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。同时变量也为局部变量和全局变量。
实际上查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
例：

@width:20px;
.homeDiv{
        @width:30px;
        .centerDiv{
                width:@width;    该处取值为30px
                }
            }
.leftDiv{
        width:@width;    该处取值为20px
        }               

Mixins（混入）
多重继承样式的实现。即在一个class中引入另外一个已经定义的class。

.class{
    border:1px solid red;
        }
.box{
    width:100px;
    heigh:100px;
    color:blue;
    .class     (该处将.class的样式引入.box中）
    }       

另可以定义一个样式选择器

.text(@color){
        background-color:@color;
            }
.box1{
        .text(red);     其中（）中的值为参数引入样式
        }           

嵌套

1. 结构清晰
2. 命名简单
3. 避免多人开发命名的重复

home{
    color:blue;
    width:600px;
    height:500px;
    .top{
        width:90%;
        }
    .center{
        width:90%;
        height:300px;
        .left{
            width:40%;
            float:left;
            }
        .right{
            width:40%;
            float:left;
            }
        }
解析后的结构为
home{}
home .top{}
home .center{}
home .center .left{}
home .conter .right{}               

函数与运算

@width:200px;
@color:#111111;
.switchColor{
    width:@width*2;
    background-color:@color*2;
        }
解析后为
.switchColor{
    width:400px;
    background-color:#222222;
        }