开发一个本身的 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 的节点，看看效果吧。

注：全部优质内容全网同时发布，包括简书、知乎、掘金、大鱼号、微信号、掘金等。

扫描下面二维码，关注微信公众号，每周免费获取精品前端小课连载，每周更新，还在等什么？赶快关注吧。