stylus結合weui源碼組件分析筆記

css的程序性

• BEM

Block： weui-cell 項目名字
例如：小鵬： xp-

安裝了stylus，css預編譯器 使用命令：npm i -g stylus
安裝插件 language-stylus

-stylus
css有太多規則
stylus是css的超集，能夠編譯成css
-省去了{:;}，高速編輯

使用 stylus cell.styl命令能夠生成相應的css文件
使用 stylus -w cell.styl -o cell.css 命令意思：將cell.styl和cell.css綁定，只要編輯cell.styl保存就能同步變化cell.css文件。
寫的是styl文件，HTML是沒法顯示使用的，
因此 -o 編譯一下 cell.css
-w 邊編譯邊執行

• 彈性佈局 flex
  1.如何啓用彈性佈局呢？
  display:flex|inline|block|inline-block 佈局相關的都是display
  彈性佈局設置在父元素上，啓動了新的空間
  原有的盒子屬性被打破了，
  .weui-cell(display:flex)>新的空間，原有塊級能力被替代.weui-cell_bd(flex:1主元素)+.weui-cell_hd(輔元素)
• 僞元素

css高級使用技巧，惟一一個能夠在css中聲明的html元素，箭頭，邊框等高級特性。
content屬性是必須的。
定位pos:r(position:relative) pos:a(position:absolute)
手動移動頁面元素到指定位置；