關於最近學習的Less預編譯語言的筆記，歡迎大家一起探討~

生活把我磨圓發表於2020-02-10
編譯筆記

Less CSS預編譯語言

  1. Less 是一門CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件。

  2. Less 可以執行在 Node 或瀏覽器端。

  3. 安裝

    • 瀏覽器端使用方式

      下載less.js到本地，連結如下：

      下載後放到專案中，在需要的html介面，使用script標籤匯入js（注意：樣式檔案需要放在引用less.js的語句前！！！不然沒作用）

      <link rel="stylesheet/less" type="text/css" href="styles.less" />
複製程式碼
      <script src="less.js" type="text/javascript"></script>
複製程式碼

      其他提示

      • 確保在指令碼之前包含樣式表。
      • 連結多個.less樣式表時，每個樣式表都是獨立編譯的。因此，您在樣式表中定義的任何變數，mixin或名稱空間均不可訪問。
      • 由於瀏覽器的原始策略相同，因此載入外部資源需要啟用CORS
      • 在瀏覽器端引用less.js比較適合開發，但不建議用於生產環境

    • Node服務端安裝使用

      使用npm命令在node伺服器端安裝Less依賴

      $ npm install -g less
複製程式碼

      使用方式

      $ lessc styles.less
複製程式碼

      使用上述方式，可以將編譯後的CSS輸出到stdout

      $ lessc styles.less styles.css
複製程式碼

      使用上述方式，可以將編譯後的樣式儲存到你新建的css檔案中

  4. less語法

    • 變數

      使用@定義變數

      @Baccolor:red
複製程式碼

      作為URL來使用：@{url}

      變數的延遲載入：@變數的作用域是塊級作用域，不管變數在作用域中賦值過幾次，會在最後一次賦值後，才是該變數的值，即使在最後一次賦值語句前，已經使用該變數。

    • 基礎巢狀

      less基礎語法就是巢狀，和html的巢狀一樣，在父級選擇器裡面寫子級選擇器

      <div class="el">
	<div class="ziji">
	</div>
</div>
複製程式碼
      .el{
	.ziji{
		color:@Baccolor
	}
}
複製程式碼

      這裡有個&的使用注意事項：&起的作用是使寫在子級裡的樣式和父級同級

      .el{
	.ziji{
		@：hover{
			color:green
		}
		color:@Baccolor
	}
}

編譯後就是:
.ziji:hover{
    color:green
}
複製程式碼
    • 混合

      混合就是將一系列屬性從一個規則集引入到另一個規則集的方式；目的就是為了減少css程式碼的冗餘，用法看起來和函式一樣，在選擇器後加括號（）

      混合主要包括（普通混合、不帶輸出的混合、帶引數的混合，帶引數並且有預設值的混合、帶多個引數的混合、命名引數、匹配模式、argument變數）

      //不帶輸出的混合：單純加個括號
.ziji(){

}

複製程式碼
      //帶引數的混合：括號裡面有形參
.ziji(@w,@c){
	width:@w;
	color:@c
}
複製程式碼
      //帶引數並且有預設值的混合
.ziji(@w:100px,@c:red){
	width:@w;
	color:@c
}
複製程式碼
      .ziji(@_,@w,@c){
	可以放公共樣式，形參需要加@_
}
.ziji(@w,@c){
	width:@w;
	color:@c
}
複製程式碼
      //匹配模式，在使用這個混合的地方，加上L或者R，以確定是使用哪個樣式
.weizhi(L,@w,@c){
	float:left；
    width:@w;
    background:@c
}
.weizhi(R,@w,@c){
	float:right；
    width:@w;
    background:@c
}


//使用
.el{
    .ziji{
        @:hover{
            .weizhi(L,100px,red)
            }
    }
}
複製程式碼
    • 計算

      less計算和css加減乘除是一樣的，唯一的區別是，只需要在進行運算的其中一方加上單位

      .ziji(){
	width:calc(100 + 100px)
}
複製程式碼

      加號兩邊要加空格啊啊啊啊啊

    • 避免編譯

      有時候不希望自己寫的樣式會被編譯，可以這樣做：

      .weizhi(){
	width:~"calc(100% + 100px)"
}
複製程式碼

  5. 總結

    好了，到自己的總結了，這是我第二次寫掘金，關於less，瞭解的還是皮毛，還有很多需要補的地方，希望大家多多包涵啊啊啊啊，歡迎提出需要更正的地方，謝過了！！

相關文章