本文轉載於：征途源碼論壇（www.zhengtuwl.com）-----一個專註精品源碼下載的平臺

一、淺析

1.采用BEM方式管理類名

• B：block，模塊,一個塊是一個獨立的實體，塊可以包含其它塊，名字單詞間用-連接；如一個搜索塊；
• E：element，元素，一個元素是塊的一部分，具有某種功能，以__與block連接。如搜索塊裏的input或button

• M：modifier，修飾符。修飾符作為一個塊或者一個元素的屬性，代表這個塊或者是元素在外觀或是行為上的改變。以--與block連接

  2.沒有選用Less或Sass之類的預處理器，而是選用更接近未來標準的CSS4風格的語法，用PostCSS和整合了postcss-bem和postcss-cssnext等插件的postcss-salad開發

  顯著特征：

• 聲明變量

  • 在sass中通過$聲明一個變量，在CSS4中是這樣聲明的：通過前綴--來聲明一個變量，如果變量放在:root中，代表此變量為全局變量，如果放在某個CSS代碼中則代表局部變量。使用時借助var()函數來調用已聲明的變量，在var()函數中可接受兩個參數。第一參數代表變量名，第二個參數指變量的默認值。如下所示：

    :root {
    --primary-color:skyblue;
    }
    nav.primary{
    background: var(--primary-color);
    color: var(--my-var, red);
    }

• 支持@import引入外部css
• 支持層級嵌套書寫
• 支持一些獨特的語法,具體源碼可以看node_modules/element-theme/lib/config.js
  • @b 後面跟著的class會渲染為el-class。如@b alert{...}會被渲染為el-alert{...}

  • @modifier或者@m 後面跟著的class會被渲染為--class。如

    @b alert{
    @modifier info{...}
    @m warning{...}
    }

    會被渲染為

    el-alert--info{...}
    el-alert--warning{...}

  • @e後面跟著的class會被渲染為__class。如

    @b alert{
    @e content{...}
    }
     
    

    會被渲染為

    el-alert__content{...}

  • @when後面跟著的class會被渲染為.is-class。如

    @b alert{
    @e title{
        @when bold {...}
    }
    }

    會被渲染為

    el-alert__title.is-bold{...}

  • @mixin button-size後面跟著四個值，分別代表padding上下、padding左右、font-size、border-radius。如

    @b button{
    @mixin button-size 10px 20px 30px 40px;
    }

    會被渲染為

    .el-button{
    padding: 10px 20px;
    font-size: 30px;
    border-radius: 40px;
    }

  • @mixin button-variant後面跟著3個值，分別代表color、background-color、border-color。同時還會渲染一系列的hover\active\focus等顏色的深淺變化。如

    @b button{
    @mixin button-variant white blue black;
    }

    會被渲染為

    .el-button{
    color: white;
    background-color: blue;
    border-color: black;
    }
    .el-button:hover,
    .el-button:focus{...}

  • tint()和shade()函數，分別用來使顏色提升亮度、顏色降低亮度用的。接受兩個參數，第一個是顏色值，第二個是明暗百分比。如

    .foo{
    color: tint(#BADA55, 42%);
    }
    .bar{
    background-color: shade(#663399, 42%);
    }

    會被渲染為：

    .foo{
    color: #e2efb7;
    }
    .bar{
    background-color: #2a1540;
    }

    3.為降低用戶自定義主題的上手成本，提供了命令行工具指導用戶快速自定義一套主題

    4.源碼

• 在node_modules/element-theme/bin/element-theme中定義了一些命令行工具的命令，如et -i,et -w等等；
• node_modules/element-theme/lib/config.js主要記載了些樣式的配置信息，將element-theme-default及element-theme結合，element-them-default文件中主要存放了各個模塊的樣式及變量文件如element-variables.css；
• config.js配置信息將要在node_modules/element-theme/lib/gen-vars.js中使用，gen-vars.js中主要記錄了讀取配置文件的邏輯；

• node_modules/element-theme/lib/task.js主要使用gulp對postCss樣式文件、字體等進行一些操作及輸出使瀏覽器支持。

二、使用方法

1.安裝工具 npm i element-theme -g

安裝默認主題（在自己項目中）npm i https://github.com/Molunerfinn/theme-default.git -D

初始化變量文件 et -i運行此命令後會在根目錄生成一個element-variables.css文件。內部包含了主題所用到的所有變量

修改變量，修改element-variables.css裏的變量即可改變整體風格（修改後保存後重新編譯運行）

修改源碼，node_modules/element-theme-default/src

編譯主題，保存文件後，到命令行裏執行 et 編譯主題，如果你想啟用 watch 模式，實時編譯主題，增加 -w 參數。命令：et -w

Element-ui Theme淺析