乐趣区

关于前端: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)
手动挪动页面元素到指定地位;

退出移动版