一:變數
語法:@變數名:值;
例子:定義乙個變數:@box-width-height: 200px;
在盒子中使用它:
#box1
二:混合
例子:定義乙個混合:
.box-style
在盒子中使用它:
#box
三:混合(帶引數)
例子:定義乙個帶引數的混合
.boxattr(@weight-height)
在盒子中使用它:
#box2
四:混合(引數可帶預設值)
例子:定義乙個引數有預設值的混合
.border_radius(@radius:5px)
在盒子中使用它:
#box
五:匹配模式(類似於js中的判斷語句)
例子:畫三角形,因為三角形有四個不同的朝向,所以我們可以在css中預定義4個不同的方向,在使用時指明要選用的方向就可以。
通常畫乙個朝左的三角形是:
#box4
當要改變三角形的朝向時就必須重新複寫樣式,所以可以在less中庸匹配模式解決:
#box4
.********(top, @width:10px, @color:pink)
.********(bottom, @width:10px, @color:pink)
.********(right, @width:10px, @color:pink)
.********(left, @width:10px, @color:pink)
而匹配模式還有乙個預設的值,就是無論匹配到上面哪乙個,這乙個都會被執行:
.********(@_, @width:10px , @color:pink)
六:運算
可以使用加減乘除的等運算
例子:
@test:200px;
#box
七:巢狀規則
在指定乙個盒子中某些元素的樣式時:
比如說在這種情況下:
id="box5">
href="#">hello lessa>
這是乙個spanspan>
type="button"
name=""
id=""
value="hello" />
form>
div>
指定樣式可以這樣寫:
#box5
}span
form
}
//巢狀在其中表示指定在#box5這個元素盒子裡面的a,span,form等元素
//而&符號表示其父級元素
八:@arguments變數
@arguments包含了所有傳遞進來的引數,當你想單獨處理每乙個引數的時候可以這樣寫:
.borde-style(@width
:30px , @color
:red , @style
:solid)
在盒子中使用它:
#box
九:避免編譯
有時候我們需要輸出一些不正確的css語法或者使用一些less不認識的專有語法
要輸出這樣的值我們可以在字串前面加上乙個~:
例如:width:~『 clac(100%-35)』;
Mobx和Mobe React傻瓜式教程
因為我也不怎麼會,所以講的很小白,但是我相信很多人都需要這種小白式的教程 而且趁著我還理的暫時清除,趕緊記下來,防止自己明天失憶 很多教程都是直接講怎麼使用,但是我感覺應該先講這玩意有什麼用 存放全域性有效資料 比如,在react中乙個思想就是乙個頁面的資料儲存在該頁面的state中,但是假設更多更...
Windows 8 傻瓜式安裝教程
點選 安裝 按鈕,如下圖 按照提示,重啟電腦。之後系統會提示你是進入原來的系統還是從硬碟啟動另乙個系統。大概寫的是 windows xp,vista,7 from hard disk 之類的話。總之一看就明白了!接下來我們可以做的主要就是等待了.下面的介面我們很熟悉了,跟win7相差不大.直接下一步...
傻瓜式Git配置
配置git 1.本地建立ssh key ssh keygen t rsa c your email youremail.com 注 your email youremail.com改為你在github上註冊的郵箱 之後會要求確認路徑和輸入密碼,我們這使用預設的一路回車就行。成功的話會在 window...