小程序 ----- 使用less框架

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。 可以運行在 Node 或瀏覽器端

設計者：由Alexis Sellier設計的動態層疊樣式表語言，受Sass所影響，同時也影響了Sass的新語法：SCSS

發行時間：2009

特點：是開源的，跨平台的，其第一個版本由Ruby寫成，但在后續的版本當中，Ruby逐漸被替換為JavaScript。受益於JavaScript，LESS可以在客戶端上運行（IE6+、Webkit、Firefox），也可以在服務端運行（Node.js、Rhino）。

在語法方面：LESS與CSS較為接近，一個合法的CSS代碼段本身也是一段合法的LESS代碼段。LESS提供變量、嵌套、混合、操作符、函數等一般編程所需的抽象機制。

LESS支持自定義變量。在LESS中，變量以“@”開頭，賦值時以“:”進行賦值。經過LESS的翻譯，這些變量最終會轉換為符合CSS標准的值。

 

1、在vscode 中安裝easy less

2、使less支持 wxss

在設置中找到設置后，點擊打開設置

 

進入到setting.json 中添加

 "less.compile": {
        "outExt": ".wxss"
    }

3、在小程序中使用less

 編寫less文件中的內容時在，vscode 中編寫會自動生成對應的wxss 文件，

若在微信開發者工具中使用不會自動同步哦，因為那個插件是在vscode中安裝的

less 的簡單使用：

/* less 的簡單使用 */
/* 1、定義一個less 變量*/
@color:red;
text{
/*2、使用變量*/
    color: @color;
}
/* 樣式嵌套  .表示類選擇器*/
view{
.view1{
    text{
        color: blue;
    }
}
}
/* 導入樣式 */
@import "../../style/reset.less";

/* 使用全局中樣式*/
view{
    color: @homeColor;
}

注意：選擇器的使用，以及嵌套表達的意思

嵌套選擇器：適用於選擇器內部的選擇器的樣式。

如下小例子：

view{ }: 為所有 view 元素指定一個樣式。
.marked{ }: 為所有 class="marked" 的元素指定一個樣式。
.marked text{ }: 為所有 class="marked" 元素內的 text元素指定一個樣式。
view.marked{ }: 為所有 class="marked" 的 view 元素指定一個樣式
view.marked text{ }: 為所有view元素內  class="marked" 的 view 元素內的 text元素指定一個樣式指定一個樣式