elementui樣式庫分析 alert

直白點 就是elementui的class命名規範。。

我以elementui中alert元件為例展開。框架用的是sass預編譯器，具體語法在中查詢。

目錄結構分析

主要用到這兩個。bem是啥？是乙個命名規範，具體看這裡 

重點說一下mixins.scss 。var.scss可以理解成乙個配置檔案（顏色、字型大小、圓角大小之類的）。

mixins.scss 的任務是動態生成 「el-alert__... 」 這種格式的class

/* bem

-------------------------- */
/** 插值
套一層class="el-.."
在乙個選擇器內宣告變數（如：$b、$e），巢狀在裡面的其他選擇器都可以訪問到它
*/@mixin b($block) 
}/**
插值套一層class="el-title__..."
at-root:輸出到根層級上
*/@mixin e($element) ;
} @if hitallspecialnestrule($selector) }}
} @else }}}
/** 插值
套一層class="...__content"
*/@mixin m($modifier) ;
} @at-root 
}}

/*

** m 代表修飾符，用來描述b(block) 如：blue,green
*/@include m(blue)
@include m(green)
/*** e 代表元素，b(block)中的元素，如：head,foot
*/@include e(head)
/*------------編譯後------------*/
.el-alert--blue 
.el-alert--green 
.el-alert__head 

element ui樣式不顯示

完整引入 在 main.js 中寫入以下內容 vue.use elementui 一定不能忘記這一步，如果沒有這一步，element ui引入成功後樣式會顯示不出來。按需引入 借助 babel plugin component，我們可以只引入需要的元件，以達到減小專案體積的目的。首先，安裝 babe...

element ui樹樣式問題

場景1 溢位的時候出現滾動條，橫向和縱向 perfect scrobar滾動條舉例 解決辦法 css新增 el tree el tree node在容器的外面新增v scroobar屬性 html 但是最好在元件的內部加，全域性加可能會影響其他現實，例如出現的場景二 場景二 當左右橫向溢位後，hov...

小白記錄 修改element ui樣式

element ui常見樣式 1 el form非空校驗的 號由左側移動到右側 cust form el form item.is required not is no asterisk el form item label wrap el form item label after,el form...