尚矽谷 Less 筆記

2021-10-23 22:20:34 字數 4138 閱讀 7356

3. less中的混合

4. less的計算

5. less的繼承

5.避免編譯

less是一種動態樣式語言，屬於css預處理器的範疇，他擴充套件了css語言，增加了變數、mixin、函式的等特性，使css更易於維護和擴充套件

less既可以在客戶端執行，也可以借助node.js在服務端執行

less官網提供了伺服器端的部署方法，我們不需要，因為 1. 這相當於是再伺服器端編譯，影響執行 2. 我們用本地環境所以只需要乙個編譯工具把less編譯成css

以//開頭的是單行注釋,這種注釋在css中沒有，所以不會被編譯到css中

以/**/包圍的是多行注釋，和css語法一樣，會被編譯到css中

定義變數用@開頭，例如

@col:pink;


div
以上是將屬性值作為變數，還可以將選擇器，屬性、字串的一部分作為變數但是使用的時候要這麼寫@

@col:pink;


@bgc:background-color;


@sel:div;


@:@color;


}
修改屬性值和宣告一樣

less中的變數都是延遲載入的，less中的變數都是塊級作用域

例如

@var:0;


div    right:@var;


}
首先變數是塊級作用域，所以right的值是不受table內部的修改而影響，為1

然後變數是延遲載入的，所以編譯器在看到left:@var;直接計算替換，而是把乙個塊跑完得到@var:3然後載進行替換的，所以left為3

我們有時需要對變數的某些狀態進行設定例如div:hover這個時候根據巢狀的思想，應該寫成

div


}
但是編譯不出來，編譯器會認為這裡的:hover是乙個選擇器，所以css會顯示為

div


div :hover
多了乙個空格導致了編譯失敗，我們不希望有這個空格，我們不希望他是層級關係，要加上乙個&

div


}
這樣空格就會消失，這裡的&代表平級

當我想為同級元素設定相同的樣式的時候我們可以用,並集選擇器直接選擇，但是對於不同級的，我們希望可以像引入**塊一樣直接插入相關**從而減少冗餘**，這時就用到了混合。

less中定義混合以點開頭，和css寫類一樣，呼叫直接寫上去

.cent


div    .inner2


}
這裡的原理相當於編譯器進行了字串替換，並且上文中.cent的內容也被原樣編譯到了css中，這時我們不想看到的

解決方法就是把.cent改為.cent()，這樣css就不會編譯.cent

我們希望我們的混合可以提供乙個api,例如我們像做乙個居中後偏左x個px的乙個混合，我們可以這樣定義這個混合

.cont-left(@off-set)


div
這樣我們呼叫混合的時候輸入10px就會居中，左移10px,看起來有點像函式，但是就是叫做混合

帶引數的混合接受預設引數

.my_mixin1(@a,@b,@c)


div
如上，兩種呼叫都是非法的，必須是形殘和實參數目相同，當然可以設定預設值

.my_mixin1(@a,@b:1px,@c:2px)


div
我們給@b與@c預設值為1和2,@a沒給，所以第乙個呼叫非法，第二個把5給了@a,第三個a=5,b=6,c=2，第四個直接分配，其衝突處理規則與c語言的預設引數處理規則相同,也可以在呼叫的時候制定賦值給的引數，與c語言相同

.my_mixin1(@a,@b:1px,@c:2px)


div
得到a=5,b=1,c=2

我們希望實現同乙個功能，但是有略有差別，我們希望傳的引數盡可能少。類似於c++中的多型

mixin_com()


mixin(l,@a,@b)


mixin(r,@a,@b)


div
可以繼續優化我們的寫法，使用同名無匹配模式開頭為@_可以實現在呼叫任何乙個多型的時候順便呼叫他

mixin(@_)


mixin(l,@a,@b)


mixin(r,@a,@b)


div
當然，@_後面可以加引數，如下**，我們可以把@_理解為佔位符

.mixin(s,@h,@w,@c)


.mixin(d,@h,@w,@c)


.mixin(@_,@h,@w,@c)


div
類似於python的列表傳參,帶白哦全體實參列表

.myb(@1,@2,@3)


div
div
以上計算是可以的，只需要計算雙方一方有單位即可

在寫less過程中，如果寫成

.mixin()


div1


div2
編譯的結果將會是

div1


div2
這樣.mixin內容被複製了兩次，是一種低效的寫法，如果編譯為如下就更好了

div1,div2


div1


div2
想要實現如上的效果需要將less寫成繼承的形式

.mixin()


div1:extend(.mixin)


div2:extend(.mixin)
明顯可以看出繼承的效率比混合高，但是靈活性差，不能傳遞引數

在編譯過程中，內部處理很簡單

更優秀的**風格應該是

.mixin()


div1


div2
但存在問題，如果**寫成如下

.mixin()


.mixin:hover()


div1


div2
兩個div是不繼承hover的屬性的，只需加上乙個all表示全部繼承

.mixin()


.mixin:hover()


div1


div2
我們如果寫下面的less**

*
編譯之後是

*
cacl()是css的計算函式，但是被less給算了，我們不想讓less做，希望編譯成如下樣式

*
也就是讓10*100px避免編譯,要求原樣輸出，只要把需要的部分加上～"",也就是

*
p.s. ie6有乙個與bfc類似的模式，一旦出現相容性問題首先考慮開啟他，放法是overflow:hidden

MySQL 尚矽谷 筆記2

案例1 查詢工資 12000的員工資訊 select from employees where salary 12000 案例2 查詢部門編號不等於90號的員工名和部門編號 select last name,department id from employees where department ...

MySQL 尚矽谷 筆記3

1.length 獲取引數值的位元組個數 utf 8乙個漢字代表3個位元組,gbk為2個位元組 select length john select length 張三丰hahaha 2.concat 拼接字串 select concat last name,first name 姓名 from em...

MySQL 尚矽谷 筆記5

語法 select 查詢列表 from 表名 where 篩選條件 order by 排序的字段或表示式 特點 1 asc代表的是公升序，可以省略 desc代表的是降序 2 order by子句可以支援 單個字段 別名 表示式 函式 多個字段 3 order by子句在查詢語句的最後面，除了limi...