开发一个自己的 CSS 框架（一）

这是一个系列，带着大家封装一个纯 CSS 框架，从零学习 SASS 语法。

代码仓库点我传送

因为简单，强依赖原生 Javascript 对虚拟 DOM 不友好（如 React、Vue、Angular），使用虚拟 DOM 对使用原生 Javascript 编程（JQuery）不友好。没有代码是最棒的代码，部署在任何地方，运行在任何地方。

我会告诉我叫 IE 吗？

看这表情，我会骗你？

抄刀开干

首先你得准备一个设计稿，什么？你没有？

首先得为 UI 选择一些基本色调，这其实是最核心的。当你改变一些基本配色之后，你会发现框架完全不同了。

搭建开发环境

初始化一个 Nodejs 项目，安装 parcel 打包工具，让 parcel 来帮我们处理可编译文件，使用简单，速度奇快，小微项目用 parcel 有如神助。

mkdir NicoUI && cd NicoUI npm init -y npm i parcel-bundler -D 

创建开始文件

touch index.html index.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/minireset.css 找到最简洁的一个版本。把里面的 sass 文件复制过来，存到 src 目录下，导入到 index.sass 中。

初始化

全局样式的初始化，比如基本行高，文字大小，字体样式等。新建 src/initinal.sass 文件，在 index.sass 导入它。

html 设置背景色与字体大小，body 设置字体大小为 1rem ，rem 代表基于 root 的 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 !default html background: $body-background-color font-size: $body-size min-width: 375px body font-size: 1rem color: $body-color font-family: $font line-height: $line-height a color: $blue text-decoration: none &:hover color: $deep-blue .meta color: $gray font-size: .8rem 

按钮

新建 src/button.sass ，先设置一下按钮的基本样式，因为样式可以被 button 或者 a 标签使用，我们希望 a 标签，鼠标是小手，而 button 不是。& 可以引用上一级别的选择器，而假如 & 想放在后面，当做字符串，要通过 #{} 包裹起来。

.btn a#{&} 

会编译成

.btn a.btn 

而

.btn @at-root a#{&} 

会编译成

a.btn 

我们按照设计的，添加边框与颜色，以及添加 hover 的颜色加深，darken 是 sass 内置的函数，第一个参数是颜色，第二个参数是加深的百分比。

.btn color: $gray border: 1px solid $light outline: none padding: .5rem 1rem cursor: default border-radius: 4px font-size: .8rem display: inline-block &.block display: block @at-root a#{&} cursor: pointer &:hover color: darken($gray, 20%) border: 1px solid darken($light, 5%) &.large font-size: .9rem padding: .7rem 1.2rem &.small font-size: .7rem padding: .3rem .7rem &.text border: none 

然后我们再给按钮添加颜色，现在我们先写一个。

.btn &.green color: #fff background: $green border-color: $green &:hover background: darken($green, 4%) &.outline color: $green background: transparent border-color: $green transition: background .2s &:hover background: $green color: #fff 

写好了之后，我们通过循环，把所有的颜色都补全，$colors 是一个字典，是一个键值对，可以理解为 JavaScript 里面的对象。通过 @each 遍历字典，拿到 key 和 value，设置相应的值即可。

$colors: ('green': $green, 'blue': $blue, 'yellow': $yellow, 'red': $red) .btn @each $name, $color in $colors &.#{$name} color: #fff background: $color border-color: $color &:hover background: darken($color, 4%) &.outline color: $color background: transparent border-color: $color transition: background .2s &:hover background: $color color: #fff 

在 html 添加一些对应 class 的节点，看看效果吧。