Less傻瓜式教程

2021-08-04 06:59:08 字數 2081 閱讀 8526

一:變數

語法:@變數名:值;

例子:定義乙個變數:@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...