这是一个带大家封装一个纯CSS框架，从零开始学习SASS语法的系列。代码仓库点我发因为简单，对原生Javascript的强依赖对虚拟DOM（如React、Vue、Angular）不友好，使用虚拟DOM对使用原生Javascript编程（JQuery）不友好。没有代码是最好的代码，随处部署，随处运行。我会说我叫IE吗？看这表情，我会骗你？仿刀，首先得准备设计稿，什么？你还没有？首先，你要为UI选择一些基本的颜色，这其实是核心。当你改变一些基本颜色时，你会发现框架完全不同了。搭建开发环境，初始化一个Nodejs项目，安装parcel打包工具，让parcel帮我们处理可编译文件。它易于使用且速度极快。小微项目使用parcel简直就是天赐良机。mkdirNicoUI&&cdNicoUInpminit-ynpmiparcel-bundler-D创建启动文件touchindex.htmlindex.sass在index.html中导入index.sass文件，我们使用sass开发，最后编译成css。搜了一大圈github前端项目，大部分还是sass，虽然笔者个人使用stylus，但是为了让大家在公司更好的配合，这里使用sass语法。创建src/vars/_color.sass定义颜色变量，在index.sass中导入@import'./src/vars/_color.sass'，颜色很漂亮，像彩虹。sass的变量以$开头，赋值和css一样，后面的!default表示可以覆盖。添加重置样式，保证所有浏览器默认样式的一致性。最简洁的版本可以在https://github.com/jgthms/min...复制里面的sass文件，保存在src目录下，导入index.sass。初始化全局样式的初始化，比如基本行高、文字大小、字体样式等。新建一个src/initinal.sass文件，导入到index.sass中。html设置背景颜色和字体大小，body设置字体大小为1rem，rem表示以根为基准的em大小，1rem为$body-size的大小，即16px。$body-background-color:#fff!default$body-size:16px!default$body-color:$dark!default$line-height:1.6!default$font:BlinkMacSystemFont,-apple-system!defaulthtmlbackground:$body-background-color字体大小:$body-sizemin-width:375pxbodyfont-size:1remcolor:$body-color字体系列:$fontline-height:$line-heightacolor:$bluetext-decoration:none&:hovercolor:$deep-blue.metacolor:$grayfont-size:.8rembutton新建一个src/button.sass，首先设置按钮的基本样式，因为样式可以被按钮或者标签使用，我们希望a标签，鼠标是小手，但是按钮不是。&可以引用上一层的选择器，如果&想放在后面，作为一个字符串，必须用#{}包裹起来。.btna#{&}会被编译成.btna.btn，.btn@at-roota#{&}会被编译成a.btn。根据设计，我们添加边框和颜色，添加hover颜色加深，darken是Sass自带的函数，第一个参数是颜色，第二个参数是加深的百分比。.btn颜色：$grayborder:1pxsolid$lightoutline:nonepadding:.5rem1remcursor:defaultborder-radius:4pxfont-size:.8remdisplay:inline-block&.blockdisplay:block@at-roota#{&}cursor:pointer&:hovercolor:dark($gray,20%)border:1pxsoliddarken($light,5%)&.largefont-size:.9rempadding:.7rem1.2rem&.small字体-size:.7rempadding:.3rem.7rem&.textborder:none然后我们给按钮添加颜色，现在我们先写一个。.btn&.greencolor:#fffbackground:$greenborder-color:$green&:hoverbackground:darken($green,4%)&.outlinecolor:$greenbackground:transparent边框颜色:$greentransition:background.2s&:hoverbackground:$greencolor:#fff写完之后，我们通过一个循环完成所有的颜色。$colors是一个字典，一个键值对，在JavaScript中可以理解为一个对象。使用@each遍历字典，获取key和value，并设置对应的value。$颜色:('green':$green,'blue':$blue,'yellow':$yellow,'red':$red).btn@each$name,$colorin$colors&.#{$name}color:#fffbackground:$colorborder-color:$color&:hoverbackground:darken($color,4%)&.outlinecolor:$color背景:transparent边框颜色:$colortransition:background.2s&:hoverbackground:$colorcolor:#fff添加一些html中类对应的节点，看看效果。注：所有优质内容全网同步发布，包括简书、知乎、掘金、大鱼号、微信、掘金等。扫描下方二维码，关注微信公众号，免费获取精品前端小班每周连载，每周更新，你还在等什么？赶紧关注起来。
