前提理解:第乙個,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...