Less基础教程

Less基础教程

less是较早出现的css预处理器。 LESS API 参考

安装和使用

安装比较简单,通过nmp或bower安装即可.

npm install less -g
bower install less

新版的chrome能直接解析less样式，不进行预编译的情况下，可以在页面引入 自己写的less文件 和 less.js
less会在页面创建<style>节点，包含编译后的样式

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="less.js" type="text/javascript"></script>

Less的语法

变量

/*变量*/
/*注意，由于变量只能定义一次，实际上他们就是“常量”.*/
@base: #f938ab;

函数

/*函数 .box-shadow(), iscolor(), isnumber(), 函数重载*/
.box-shadow(@style, @c) when(iscolor(@c)){
    -webkit-box-shadow:@style @c;
    box-shadow:@style @c;
}

.box-shadow(@style, @alpha:50%) when(isnumber(@alpha)){
    .box-shadow(@style, rgba(0,0,0, @alpha));
}

/*使用变量，调用函数*/
.box{
    color:saturate(@base, 5%);
    border-color:lighten(@base, 30%);
    div{
        .box-shadow(0 0 5px, 30%)
    }
}

变量和运算符

/*定义变量，使用运算符*/
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;


/*使用变量*/
#header{
    color: @light-blue;
    .nav{
        font-size:20px;
    }
    .logo{
        width:200px;
        height:100px;
        float:left;
        background:#aaa;
    }
}


.bordered{
    border-top:dotted 1px green;
    border-bottom:dashed 2px blue;
}
.txt-none{
    text-decoration:none;
}

混合 mixin

/*~~嵌入 其他样式*/
/*混合*/
/*混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集。*/
#menu a{
    color:#111;
    .bordered;
    .txt-none
}

.post a{
    color:red;
    .bordered;
    .txt-none;
}

嵌套 nest

/*~~包含 内部样式定义*/
/*嵌套 样式规则 这样的代码更简洁, 它模仿了 HTML 的结构. & 表示当前选择器的父选择器*/

.clearfix{
    display:block;
    zoom:1;
    &:after{
        content:'';
        display:block;
        clear:both;
        visibility:hidden;
        font-size:0;
        line-height:0;
        height:0;
    }
}

/*上面等价于*/

.clearfix{
    display:block;
    zoom:1;
}
.clearfix:after{
    content:'';
    display:block;
    clear:both;
    visibility:hidden;
    font-size:0;
    line-height:0;
    height:0;
}

#header {
    color: black;
    .logo {
        width: 300px;
    }
}

/*等价于*/
#header {
    color: black;
}
#header .logo {
    width: 300px;
}

包含媒体查询的嵌套

/*~~包含 媒体查询*/
/*嵌套 媒体查询*/
.screencolor{
    @media screen{
        color: green;
        @media (min-width:768px){
            color:red;
        }
    }

    @media tv{
        color:black;
    }
}

运算

/*定义变量 变量运算和赋值*/
@baseAlpha: 30%;
@filler: @baseAlpha * 2;
@other: @baseAlpha + @filler;
@var: 5px + 10;

/*变量直接作为属性值，或运算后作为属性值*/
.test{
    padding-top: @var;
    color:#888 / 4;
    background-color: @base + #111;
    height: 100% /2 + @filler
}

bundle(只minxin bundle的一部分)

/*包含 内部元素样式定义*/
#bundle{
    .button{
        display:block;
        border:1px solid hotpink;
        background:grey;
        &:hover{
             padding: 0px; color: green;">#fff;
        }
    }
}

/*嵌入 包含定义的样式*/
#header a{
    color: skyblue;
    #bundle > .button;
}

变量的作用域

/*变量作为样式属性值,注意变量的作用域 {}*/
/*变量可以在最外层声明，也可以在样式定义{}中声明*/
@varcolor: red;
#footer{
    color: @varcolor;
    @varcolor: green;
}

变量插值(插值到选择器或样式属性)

/*变量作为插值表达式 使用在选择器中,注意格式@{varname}*/
@myselector: banner;
.@{myselector}hihi{
    font-weight:bold;
    line-height:40px;
}

变量作为
@img: "../images";
.test-img{
    color:#444;
    background-image:url("@{img}/white-brand.jpg");
}

动态变量(变量的值作为另一个变量的名)

.test-var{
    @found: "i am found";
    @varfnd: "found";
    content:@@varfnd;

}

变量顺序解析 同名覆盖

.test-lazy{
    width: @var2;
    @a2: 9%;
    height:@a2;
}

@var2: @a2;
@a2: 100%;

.test-lazy2{
    width: @var2;
    height:@a2;
}

@var3 : 0;
.class{
    @var3:1;
    .blass{
        @var3:2;
        three: @var3;
        @var3:3;
    }
    one: @var3;
}

@import "other";
@base-color: green;
.test-import{
    font-size:20px;
    background: @base-color;
    color:@dark-color;
}

继承 extend

nav ul{
    &:extend(.inline);
    background:blue;
}

.inline{
    color:red;
}

.a:extend(.inline){
    font-size:18px;
}

.bucket{
    tr & {
        color:blue;
    }
}

.some-class:extend(tr .bucket){
    border:1px dotted green;
}