小專案使用less預編譯css的常用東西步驟和總結
阿新 • • 發佈:2018-11-26
Less使用
http://lesscss.cn/(Less 中文網)
下載編譯工具(koala)
安裝
開啟後如圖
初始化設定
點選設定進行語言設定,關閉重啟
點選加號進行程式碼專案匯入,如上圖所示
右擊此專案設定輸出路徑,雙擊此專案進行less設定
Less開始
Less註釋
/*我是可編譯註釋*/
Css中可見
// 我是不編譯的註釋
Css中不可見
1.Less變數
用法:@變數名:值
便於統一管理
關鍵字@
例如@str
賦值
@str:7.5rem
2.混合
簡單混合(如下圖)
混合帶引數(如下圖)
混合帶預設引數(如下圖)
作用
可以做屬性相容處理
例如:
公共樣式引用
3.匹配模式
寫多個方法,呼叫時提高複用率
呼叫
4.運算
加減乘除和括號
除了寬高還有顏色
5.巢狀
子元素可放在父元素中巢狀
&符號代表繼承上一層選擇器
&第二種用法
標籤名稱:
樣式設定:
[email protected](全參)
作用;可儲存所有變數
7.避免編譯
8.!important(優先)
9.匯入外部less或者css
// 匯入less
@import "lessKu";
// 匯入css檔案(不編譯)
@import "../css/ty.css";
// 匯入css樣式(會編譯)
@import (less) "../css/ty.css";
其他
考拉報錯提示圖
問題:
為什麼在定義沒有帶引數的 混合 也要帶括號?
為什麼在定義沒有帶引數的 混合 也要帶括號? 例如: .bc(){ margin-left: auto; margin-right: auto; } 在呼叫的時候也是.bc的格式
寫了括號以後 他就變成了真正的混合(類似於js中的函式) 這樣的話 這個東西就是不被比編譯出來的
也就是說
.b 的class 引用了 .rel(); 那只有b這個東西 有 relative
如果不加括號 .rel{..} 那這還是一個普通的class 編譯的時候依然保留
清除浮動