less

@charset "UTF-8";
// css 中不支持，不会编译在css中
/* css中可使用 */

/* 变量 */
/* 必须@前缀，是等于的意思，必须分号结束*/
/* 不能以数字开头，不能包含特殊字符,区分大小写 */
@myColor: #f40;
@classname: box;
div{
    color: @myColor;
}
.@{classname}{      // 当使用变量跟其他字符拼接时 加{}  
    color: @myColor;
}

/* Mixin 混入 类似函数*/
/* 混入样式例子 */
.fl{
    float: left;
}
.width50{
    width: 50%;
}
/* 类混入 */
.fl-width50{    /* 可以组合样式 */ /* 但是例子中不需要的也会编译成css */
    .fl();
    .width50();
}
/* 函数混入*/   /* 函数类声明和类声明不能一起出现 */
.fr(){        
    float: right;
}  
.m50(){
    margin-left: 50px;
}
/* 目标类*/
.fl-m50{
    .fr(); 
    .m50();
}
/* 传参 */
/* 
    1.定义了参数（没有默认值），调用的时候必须传参 
    2.定义默认值 
*/
.posi(@loca){
    position: @loca;
}
.mr(@distance:50px){     /* :定义默认值 可传参可不传*/
    margin-right: @distance;
}
.positionab{
    .posi(absolute);
    .mr(60px);
}

/* 嵌套 */
.box{
    background-color: green;
    div{
        background-color: red;
    }
    &:hover div{   /* 需要连接的情况 & */
        background-color: blue;
    }
}

/* import 导入 */
// @import "test.less";

/* 函数 */ 
/* 内置函数 */
/* 运算 */