stylus

很久没写过博客沉淀下，最近看了几篇前端工程化的文章，结合自己实践所学，阐述下什么是前端工程化。 大前端其实分为很多种 移动应用开发的前端 web前端 本篇主要是说下web前端的工程化 什么是前端工程化 在回答前端工程化这个问题之前，我们应该先考虑另外一个问题：前端开发中会不会涉及到业务？再详细一点，就是前端工程师到底需不需要了解服务端的业务逻辑，再或者说，要不要将一部分服务端的业务逻辑放到前端来实现。这个问题没有标准的答案，实际上应该属于工程协作问题，就是谁该干什么的问题。 最早的前端开发就是实现页面，顶多再写写JS让页面可以有交互的特效。 属于前后端未分离的时代。 但是随着需求的增加，我们不仅要做Web应用，还要做App、小程序以及各种端。 前后端分离的时代开始， 在这种需求日增的情况下，必须得考虑一种新的方式，优化前端的开发工作，例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。 前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。 工程化变表现 一切以提高效率、降低成本、质量保证为目的手段都使工程化 创建：脚手架 编码：代码格式化、编码效率 预览：热更新、Mock、Source Map 代码提交：项目整体检查 部署：自动发布 注意

原文: WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 注释直接写在代码里了 不太理解意思的 可以先去看看我上一篇 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 滚动条因为要在触摸屏上用 所以我设计的很宽 宽度可以自己改 把宽度变量单独拿出来了 先上效果图 还没滚动 已滚动区域 滚动到底部 内容够显示,不需要滚动条的时候 < Window xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys ="clr-namespace:System;assembly=mscorlib" x:Class ="ScrollViewerStyle.Window1" x:Name ="Window" Title ="Window1" Width ="300" Height ="300" > < Window.Resources > <!-- 滚动条默认背景色灰色 --> < ImageBrush x:Key ="imgVerticalScrollBarBackground" TileMode ="FlipY" ImageSource =

触摸屏上客户要求滚动条宽度大些，方便手指上下滚动，之前在网上看了个，原文找不到了，代码记录下。 效果如下： < ControlTemplate x:Key ="ScrollViewerControlTemplate1" TargetType =" {x:Type ScrollViewer} " > < Grid x:Name ="Grid" Background =" {TemplateBinding Background} " > < Grid.ColumnDefinitions > < ColumnDefinition Width ="*" /> < ColumnDefinition Width ="Auto" /> </ Grid.ColumnDefinitions > < ScrollContentPresenter x:Name ="PART_ScrollContentPresenter" CanContentScroll =" {TemplateBinding CanContentScroll} " CanHorizontallyScroll ="False" CanVerticallyScroll ="False" ContentTemplate =" {TemplateBinding ContentTemplate} " Content ="

“我们活得好好的，为什么要工程化？” 让我们从原始的前端开始。用记事本新建一个卡哇伊的a.html页面，给它点样式a.css，DUANG加特技a.js。无须编译，本地预览，OK，没问题，上传服务器，等用户访问。哇，前端好好玩，好简单有木有？！然后，我们访问页面，效果还行，再看下网络请求，200！完美！ 等一下，还没完呢？小公司到这儿就OK了，数据上上去，没兼容问题，完美啊！大公司说：注意性能，我要访问量！不好玩了吧！看看a.css的请求，如果每次用户访问都要加载，是不是很影响性能，浪费宽带啊！如果网络请求状态是304就好了！304，本地缓存！ 这回成了吗？不行，304是协商缓存，还是要和服务器通信一次。于是必须彻底灭掉这个请求，那么强制使用本地缓存，不要和服务器通信。那么问题来了：都不让浏览器发资源请求了，这缓存还咋更新呢？对，更新页面中引用的资源路径，让浏览器放弃缓存，加载新资源。问题解决，完美！ 大兄弟，别慌呀！现在a.html上面只有一个a.css，带上版本参数来改变资源路径，OK。假如还有b.css、c.css，某次上线只改了a.css的版本，通用的路径生成器上将全部版本都改了，那岂不是又有浪费了。这样一来，要解决这种问题就必须让版本修改和文件内容关联，才能准确地对应资源版本。什么东西与文件内容相关呢？大佬们想到利用数据摘要算法对文件求摘要信息

stylus是css开发辅助工具，类似lLess和Sass,安装成功后的使用如下图所示 使用的时候要特别注意缩进，因为缩进是页面dom的父子关系或者兄弟关系的体现，如图font-size:0.4rem可以理解为.header类下的.header-left类下的.text-align类 的font-size为0.4rem。而且较平常使用的css相比可以不写{}和属性后的；。这样代码更简洁易读，同样stylus也可以像Less、Sass一样使用变量 一、安装 通过终端打开项目所在的文件夹，使用 cnpm的前提是安装了淘宝镜像，否则使用npm , 1、安装 stylus ，输入命令： cnpm install stylus --save 2、安装stylus-loader,输入命令 ： cnpm install stylus-loader --save 3、启动项目，输入命令： npm run dev 二、引入 在要使用的文件style标签下面引入stylus 输入：@ import '~styles/varibles.styl' 至此，stylus的安装和使用已经完成。 来源： oschina 链接： https://my.oschina.net/u/4264283/blog/3406920

less、sass、stylus 它们是三种类似的样式动态语言，属于css预处理语言，它们有类似css的语法，为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么做是为了css的编写和维护。 它们使用的文件分别是： .less、 .scss、*.styl,这些文件是不能再网页上直接使用的，最终要编译成css文件来使用，编译的方法有软件编译，或者用nodejs程序。 less、sass编译软件： http://koala-app.com/index-zh.html less中文网址： http://lesscss.cn/ less语法： 1、注释 // 不会被编译的注释 /* 会被编译的注释 */ 2、变量 @w:200px; .box{ width:@w; height:@w; background - color:red; } 3、混合 .border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w; height:@h; border:@bw solid #ddd; } .box{ .border; background - color:red; } 4、匹配模式 .p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){

　　安装步骤基于使用vue-cli创建的项目： 　　　　创建完一个初始项目后，通过 npm install css-loader style-loader -D 　　　　再安装stylus:通过　　　　 npm install stylus --save-dev 　　　　　　　　　　　　　　　　npm install stylus-loader --save-dev 　　　　然后在build--->webpack.base.config.js中配置规则： 　　　　　{ 　　　　　　　　test: /\.css$/, 　　　　　　　　loader:''style-loader!css-loader!stylus-loader' 　　　　　　} 　　可能完成上述步骤仍然会出错： 　　　　cannot　find module 'stylus' 　　　　原因是在webpack里面可能还是没有正确安装依赖，就再次安装就好了； 　　　　　　npm install stylus --save-dev 　　　　　　npm install stylus-loader --save-dev　　 　　　　再次运行项目的时候，就可以了； 来源： oschina 链接： https://my.oschina.net/u/4275236/blog/3354447