emmet与codemirror打造的less编辑与生成css工具代码
代码语言:html
所属分类:其他
代码描述:emmet与codemirror打造的less编辑与生成css工具代码
代码标签: 打造 的 less 编辑 与 生成 css 工具
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/lib/codemirror.css'> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/theme/material.css'> <style> /* helpers/grid.css */ .grid { width: 100%; } .grid__row { display: -webkit-box; display: -ms-flexbox; display: flex; } .grid__col { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .grid__col--6 { width: 50%; } /* layout/base.css */ * { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; } body { font-family: sans-serif; line-height: 1.5; margin: 0; min-height: 100%; } /* modules/code.css */ .pre { height: 100vh; } /* modules/form.css */ textarea { background: none; border: 0; height: 100vh; margin: 0; padding: 0.5em; width: 100%; } /* vendor/codemirror.css */ .CodeMirror { height: 100vh; } .CodeMirror-readonly .CodeMirror-cursor { display: none; } </style> </head> <body translate="no" > <div class="grid"> <div class="grid__row"> <div class="grid__col grid__col--6"> <textarea class="js-input">@primary-color: red; nav { ul { list-style: none; margin: 0; padding: 0; } li { position: relative; } a { color: @primary-color; } }</textarea> </div> <div class="grid__col grid__col--6"> <textarea class="js-output"></textarea> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/codemirror/codemirror.5.26.js"></script> <script src='//repo.bfw.wiki/bfwrepo/js/codemirror/mode/css/css.js'></script>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0