I elementui the alert component as an example to unfold. el sass with a pre-compiler, concrete syntax in https://www.sasscss.com query.
Directory Structure Analysis
The two main uses. BEM is what? Is a naming convention, look here https://zhuanlan.zhihu.com/p/33188830 .
Well, mainly talk about mixins.scss this. var.scss can be understood as a profile (color, font size, fillet size and the like).
The tasks are dynamically generated mixins.scss "el-alert __..." class of this format
/ * The BEM -------------------------- * / / ** interpolation sets one class = "el- .." In one selector the variable declaration (such as: $ B, $ E), nested inside the other selectors can access to it * / @mixin B (Block $) { $ B:! $ namespace + '-' + $ Block Global; . # {B} {$ @content; } } / ** interpolation sets one = class "EL-title __..." AT-the root: the root level to the output * / @mixin E ($ Element) { $ E : $ Element Global;! $ Selector: &; $ currentSelector: ""; @each Unit in $ {$ Element . currentSelector $: $ # {currentSelector + "" + $ B $ + $ + Separator Element Unit-+ ", "}; } @if hitAllSpecialNestRule($selector) { @at-root { #{$selector} { #{$currentSelector} { @content; } } } } @else { @at-root { #{$currentSelector} { @content; } } } } /** 插值 套一层class="...__content" */ @mixin m($modifier) { $selector: &; $currentSelector: ""; @each $unit in $modifier { $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; } @at-root { #{$currentSelector} { @content; } } }