less筆記

less註釋

/**/會在編譯的時候加入到.css文件中
// 不會編譯到.css文件中

 

less變量

@width:200px;

less混合

.red{background:red;}
.box{
    width:200px;
    height:200px;
    .red;
}
編譯的結果：
.box{
    width:200px;
    height:200px;
    background:red;
}

混合-帶參數

.border(@border_width){
    border:solid red @border_width;
}
.box{
    width:200px;
    height:200px;
    .border(5px);
}
編譯的結果：
.box{
    width:200px;
    height:200px;
    border:solid red 5px;
}

混合-默認帶值

.border(@border_width:10px){
    border:solid red @border_width;
}
.box{
    width:200px;
    height:200px;
    .border(); //也能夠最近傳值，如：.border(20px);
}
編譯的結果：
.box{
    width:200px;
    height:200px;
    border:solid red 10px;
}

混合例子

.border-radius(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .border-radius(5px);
}
編譯的結果：
.box{
    width:200px;
    height:200px;
    background:red;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

less匹配模式

.pos(r){
    position:relative;
}
.pos(a){
    position:absolute;
}
.pos(f){
    position:fixed;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .pos(r);
}

編譯的結果：
.box{
    width:200px;
    height:200px;
    background:red;
    position:relative;
}

less運算

@width:200px;
.box{
    width:@width - 100; //可加減乘除
}
編譯的結果：
.box{
    width:100px;
}

less嵌套規則

.box{
    width:200px;
    height:200px;
    background:red;
    li{
        background:#000;
    }
}
編譯的結果：
.box{
    width:200px;
    height:200px;
    background:red;
}
.box li{
    background:#000;
}

a{
    color:#000;
    &:hover{ //&表明上一層
        color:red;
    }
}
編譯的結果:
a{
    color:#000;
}
a:hover{ 
    color:red;
}

less @arguments變量

.border_arg(@w,@c,@type){
    border:@arguments;
}
.box{
    width:200px;
    height:200px;
    background:red;
    .border_arg(3px,red,solid);
}
編譯的結果:
.box{
    width:200px;
    height:200px;
    background:red;
    border:3px red solid;
}

less避免編譯

.box{
    width:~'cale(300px - 30px)'
}
編譯的結果:
.box{
    width:cale(300px - 30px);
}

less !important

.red{color:red}
.box{
    .red !important;
}
編譯的結果:
.box{
    color:red !important;
}