跟我一起了解less(3) 判斷和迴圈

2022-08-24 00:06:10 字數 1940 閱讀 6871

官網的api中,判斷和迴圈是page的後面才被說明的,可能官方認為它們兩個也屬於「混合」。

但為了更好的學習less,我把它拿到了這章先來了解一下。

注:例子截圖是轉換成css的語句

1、判斷:官網稱作mixin guards

(1)語法規則:when ( 布林值 )

//用法一:when放在函式後面

//用法二:when放在選擇器後面

//用法三:單獨使用when進行判斷,此時需要在when前加上「&」符號

(2)判斷

布林值:less中任何非true的值都是false,如 @aaa:"1"、#012 等等

條件:>、>=、<=、

邏輯:and、,、not 來表示與或非

//用法四:判斷條件例子

@s1:11%;

@c1:#444; //非數值型別的只能用「=」來判斷,包括顏色,如果用其他的判斷都返回false

(3)判斷函式

判斷函式只返回true和false,相對比較簡單,看上圖中的函式名就能知道含義。

(4)模擬else分支

按照官網截圖的意思,是需要用到default()函式來模擬else的情況

//用法五:這裡我做了個實驗,發現default()函式只能在類似於.aaa()的函式式中使用,單獨或者在選擇器的後面接when使用都會報錯

@s2:9%;

.aaa() when (@s2 > 10%) }

.aaa() when (default()) }

.aaa() when (@s2 < 6%) }

.aaa();

2、迴圈:less本身沒有迴圈的語法,但是函式可以遞迴來呼叫,這樣就可以模擬迴圈

//用法六:模擬for迴圈

大家一起學習less 3 命名空間

這其實是 巢狀規則 的公升級版。我們先看官網例子吧 less 這裡是命名空間的定義,裡面包含乙個button方法 bundle 這裡是具體呼叫,通過 yyy方式進行呼叫,本人覺得用 更可靠,起碼長得不像親子選擇器 header a 生成的 css header a header a hover上面的...

一起了解RESTful架構

restful架構,就是目前最流行的一種網際網路軟體架構。它結構清晰 符合標準 易於理解 擴充套件方便,所以正得到越來越多 的採用。首先我們從字面入手,顯然這是乙個縮寫,全稱是 representationstatetransfer 直譯過來就是 表現層狀態轉化 下面我們了解一下每個單詞背後的含義,...

1 1 一起了解大資料!

什麼是大資料?大資料是指無法在一定時間範圍內用常規軟體工具進行捕捉 管理和處理的資料集合,是需要新處理模式才能具有更強的決策力 洞察發現力和流程優化能力的海量 高增長率和多樣化的資訊資產。大資料的作用?1 對大資料的處理分析正成為新一代資訊科技融合應用的結點。移動網際網路 物聯網 社交網路 數字家庭...