學(xué)前端的同學(xué)可能都知道less，為了方便學(xué)習(xí)less ，這里給大家總結(jié)了幾個(gè)常用的語(yǔ)法。

 

變量

/*變量*//*注意，由于變量只能定義一次，實(shí)際上他們就是“常量”.*/

@base: #f938ab;

函數(shù)

/*函數(shù) .box-shadow(), iscolor(), isnumber(), 函數(shù)重載*/

.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));

}

/*使用變量，調(diào)用函數(shù)*/

.box{    color:saturate(@base, 5%);

    border-color:lighten(@base, 30%);

    div{

        .box-shadow(0 0 5px, 30%)

    }

}

變量和運(yùn)算符

/*定義變量，使用運(yùn)算符*/

@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

/*~~嵌入 其他樣式*//*混合*//*混合就是一種將一系列屬性從一個(gè)規(guī)則集引入(“混合”)到另一個(gè)規(guī)則集。*/#menu a{    color:#111;

    .bordered;

    .txt-none

}

 

.post a{    color:red;

    .bordered;

    .txt-none;

}

嵌套 nest

/*~~包含 內(nèi)部樣式定義*/

/*嵌套 樣式規(guī)則 這樣的代碼更簡(jiǎn)潔, 它模仿了 HTML 的結(jié)構(gòu). & 表示當(dāng)前選擇器的父選擇器*/

 

.clearfix{    display:block;    zoom:1;

    &:after{        content:'';        display:block;        clear:both;        visibility:hidden;        font-size:0;        line-height:0;        height:0;

    }

}

 

/*上面等價(jià)于*/

 

.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;

    }

}

 

/*等價(jià)于*/#header {    color: black;

}#header .logo {    width: 300px;

}

包含媒體查詢(xún)的嵌套

/*~~包含 媒體查詢(xún)*//*嵌套 媒體查詢(xún)*/

.screencolor{

    @media screen{        color: green;

        @media (min-width:768px){            color:red;

        }

    }

 

    @media tv{        color:black;

    }

}

運(yùn)算

/*定義變量 變量運(yùn)算和賦值*/

@baseAlpha: 30%;

@filler: @baseAlpha * 2;

@other: @baseAlpha + @filler;

@var: 5px + 10;

/*變量直接作為屬性值，或運(yùn)算后作為屬性值*/.test{

    padding-top: @var;

    color:#888 / 4;

    background-color: @base + #111;

    height: 100% /2 + @filler

}

bundle(只minxin bundle的一部分)

/*包含 內(nèi)部元素樣式定義*/#bundle{

    .button{        display:block;        border:1px solid hotpink;        background:grey;

        &:hover{            background-color:#fff;

        }

    }

}

 

/*嵌入 包含定義的樣式*/#header a{    color: skyblue;

    #bundle > .button;

}

變量的作用域

/*變量作為樣式屬性值,注意變量的作用域 {}*//*變量可以在最外層聲明，也可以在樣式定義{}中聲明*/@varcolor: red;

#footer{

    color: @varcolor;

    @varcolor: green;

}

變量插值(插值到選擇器或樣式屬性)

/*變量作為插值表達(dá)式 使用在選擇器中,注意格式@{varname}*/

@myselector: banner;

.@{myselector}hihi{

    font-weight:bold;

    line-height:40px;

}

 

變量作為

@img: "../images";.test-img{

    color:#444;

    background-image:url("@{img}/white-brand.jpg");

}

動(dòng)態(tài)變量(變量的值作為另一個(gè)變量的名)

.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;

}

 

 

 

原文來(lái)自：博客園/stephenykk