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

2021-02-12 15:16

阅读：627

这是一个系列，带着大家封装一个纯 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/min... 找到最简洁的一个版本。把里面的 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 的节点，看看效果吧。

技术图片