less的一些用法整理

2021-09-22 01:31:16 字數 1622 閱讀 5401

前提理解:第乙個,less是單獨的一種檔案,可以理解為css的公升級版,完全按照css寫也沒問題,不過它提供了很多便利的東西,可以省好多**量。第二個,html只認css,所以需要配套一些軟體將less解析成css,引用時候,直接引用css就好。gulp,koala 都是常用的,koala好像簡單且方便一點。

less的優勢有很多,最常用也是最讓人舒坦的應該就是它的巢狀規則。 我們寫css時如果元素過多,每個都像

.test .contnet ul li

這樣寫的話,大概會瘋,結構不清晰,查詢起來也不知道哪塊歸哪塊,反正長長的都是css。在less中,則可以這樣寫

.test

看起來好像很煩,其實不是,因為css要寫起來,需要四個塊,每個塊都得把父元素寫清楚,不然有可能重名出錯(尤其專案大起來的時候,幾十個頁面,class重名太常見了),而less只需要乙個塊, .test連同其後代元素全部在它的包裹內設定好,每個元素名稱只需要寫一次就夠了。

這個符號在less中可以代替父級元素,舉個栗子

a優點:塊和塊界限可以更清楚,很多東西不需要並列寫;時不時還可以偷個懶,比如爸爸類的名字改來改去的時候,寫&也省心好多。

重要說明:變數需要@開頭,比如@width,@height,名字可以隨便取

定義的話在相應位置直接寫就好,類似於這種(寫.box外面也可以)

.box,別的類沒法呼叫。

有變數當然可以計算,比如

@width:500px;

.box之內,取什麼名字都隨意*/

.btn(@color)

呼叫時候是這樣的

.submit{

.btn();  //這裡一定要加括號,需要改預設值,直接寫括號裡,否則寬度就是500px

還是上面的例子,如果我一定要用乙個.btn(***xx)解決,涵蓋所有按鈕樣式,可不可以,答案是可以。匹配模式就是這種可以隨便定製的東西,其實理解起來也很簡單,括號裡多乙個命名而已,比如呼叫這個.btn(no_border,#55e276); 表示無邊框樣式,背景色為#55e276(注意,命名是沒有@符號的),如果呼叫.btn(border,#e65151); 表示有邊框樣式,背景色為#e65151,具體寫法如下

.btn(@_,@color){ //不同命名的公共部分要這樣寫,必須是@_,表示公共部分

width:120px;

height:30px;

line-height:30px;

border-radius:15px;

color:#fff;

font-size:14px;

text-align:center;

background:@color; //用引數表示

cursor:pointer;

.btn(no_border,@color){

//可以直接這樣放著,或者寫個border:none   這裡的列子舉得不好,如果換成左浮動右浮動,或者絕對定位的上下左右,應該更好點

.btn(border,@color){

border:1px solid #ccc;

.btn(border); //表示預設背景色有邊框,邊框顏色也可以寫個引數進去

.btn(border,#e65151)//表示背景色#e65151,有邊框

整理mysql的一些特殊用法

mysql連貫字串不能利用加號 而利用concat。比方在aa表的name欄位前加字元 x 利用 update aa set name concat x name 字段時間資料型別為datatime 可使用to days 欄位名 將時間轉換為乙個數字 計算兩個日期差值 可以用這個數字做差 例如 se...

LESS系列 一些常用的Mixins

在我們平時的開發中,對於一些使用頻率很高的方法函式,我們一般都會將其歸納到一起,整理出乙個核心庫來。其實這個思想,借助 less 也可以在 css 中得以實現。下面是幾個在 w3cplus 中偷過來的常用 mixins,將其轉成 less 版 在開始前,必須說說 less 的乙個不足之處,那就是不能...

的一些用法

action標籤,顧名思義,是用來呼叫action的標籤,在jsp中頁面中,可以具體指定某一命名空間中的某一action。而標籤的主體用於顯示及渲染actionr的處理結果。action標籤有如下幾個屬性 id 可選屬性,作為該action的引用id name 必選屬性,指定呼叫action nam...