css less

1、css less

//单行注释
开头：@charset "utf-8";

变量：
    @color:#000;
    
用法;
    color:@color;
    width:@width;
    
混合(mixin 1、普通)  
    1.在选择器里引用另一个选择器
      先定义一个.w{
                    width:1210px;
                    margin:0 auto;
                }
    2.定义一个不带输出的mixin：
        .w(){
            加个()就不输出了
        }
    3.带有一个参数的mixin
        .f(@fl){
            float:@fl;
        }
        .left{
            .f(left);
        }
    4.传一个参数的,并带有默认值的mixin
        .f(@fl:left){
            float:@fl;
        }
        h2{
            .f();
        }
        p{
            .f(right);
        }
    5.传多个参数的mixin
        .f(@fl;@w;@h){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f(left;200px;300px)
        }
    6.带有默认值的多个参数的mixin
        .f(@fl:left;@w:200px;@h:300px){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f();
        }
        .right{
            .f(right;300px;400px);
        }

2、less的嵌套规则

.right{
    h3{
        .f(right;300px;30px);
    }
    li{
        .f();
        a{
            color:@color;
        }
        &:nth-child(2){
        }
    }
}       

3、HTML5新增标签

<header class="header">
</header>

<nav class="nav">
</nav>

<div class="main">
    <aside class="left">
    </aside>
    <div class="center">
    </div>
    <div class="right">
    </div>
</div>  

<time></time>行内

<footer class="footer">
</footer>

<address></address>

section==div

图文混排:
<figure>
    <img src="">
    <figcaption>
        <h3></h3>
        <p></p>
    </figcaption>
</figure>

  两个标题同时出现：
<hgroup></hgroup>

文章：
<article></article>

画布：
<canvas></canvas>