js學習總結 less的基礎語法和使用

2022-07-12 23:09:21 字數 1354 閱讀 4478

less的語法基本上分為以下幾個方面:變數、混合(mixins)、巢狀規則、運算、函式、作用域等

1、變數(和js中的變數一樣,不是使用var而是使用@,@還可以定義一些url位址等)

2、混合(mixins)  通俗的講就是把其他的樣式拿過來自己使用  (如果在下述的public加乙個括號變為函式,則最後編譯的時候public這段樣式**會不存在)

徵用:把原來的樣式轉殖乙份一模一樣的拿過來使用,如果public加上括號,public本身就不編譯了

.public.box

還有下面的一種寫法。

公用:和原來的選擇器公用一套樣式,但是需要保證原來的選擇器不加括號

.box

/*編譯後結果

*/.box,.public

3、命名空間和作用域(每乙個{}裡面就是乙個單獨的作用域,和js一樣)

@v:1;

.box}

4、!important

.public()&:hover}

.box

5、函式

.public(@x,@y).box

/*條件

*/.public(@x) when (@x<10) and (@x>0)

/*還有一些方法 iscolor isnumber...

*/.public(@x) when (iscolor(@x))

/*loops 遞迴

*/.public(@n,@i:1) when (@i<=@n)& when (@i=3)& when (@i=2)& when (@i=4)}

.public(@n,@i+1);

}.public(@n:4);

/*+(用逗號隔開) 和 +_(用空格隔開)

*/.transform(@v:1).box.box2.box}

.box2

/*上面相當於

*/.link .box2}

/*匯入公共樣式

*/@import (reference) "common";

/*reference 只引入檔案不編譯

*/

less基礎語法

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數 混合 mixin 函式等功能,讓 css 更易維護 方便製作主題 擴充。node 瀏覽器和 rhino 平台都可以。本人使用的則是國人的koala。分為兩種 和 1.此種編譯後不會出現在css檔案中,不編譯 2.這種編譯後...

less學習總結

less是一種動態樣式語言,less將css賦予了動態語言的特點,比如 變數 繼承 運算 函式。less既可以在客戶端執行,也可以借助node.js或者rhino在服務端執行。less的優點 1.結構清晰,便於擴充套件。在less中的巢狀規則下,我們可以在乙個選擇器中巢狀另乙個選擇器來實現繼承,這樣...

JS基礎語法 分支語句總結

if語句 乙個分支 if else語句 兩個分支,最終只執行乙個分支 if else if else if.語句 多個分支,也是只會執行乙個 switch case語句 多分支語句,最終也會乙個 必須要有break 三元表示式 和if else語句是一樣的 什麼時候使用if else if.一般是對...