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

funnyZhang 发布于2019-08-30 15:54 / 831人阅读

摘要：当你改变一些基本配色之后，你会发现框架完全不同了。的变量以开头，赋值与相同，后面的代表它是可覆盖的。通过遍历字典，拿到和，设置相应的值即可。

这是一个系列，带着大家封装一个纯 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 的节点，看看效果吧。

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

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

超融合服务器 idc机房托管怎么搭建一个自己的视频网站如何搭建一个自己的服务器如何搞一个自己的hyp加速专线开发框架的搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116899.html

13个帮你提高开发效率的现代CSS框架

摘要：官网是围绕构建的，是一个免费的开源框架。官网在压缩后仅为，以移动优先的理念为中心。官网被称为轻量级响应式现代化，是一个基于的框架。通过添加主题或自定义组件能够帮你进一步开发个性化的。官网有时框架可以包含仅对其原始开发人员有意义的类名。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/mo... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的...

xumenger 2019-08-30 10:52 评论0 收藏0
譯文別再用 JS 框架了

摘要：我承认从搞笑文章你糟蹋了中得到了一点灵感，不过我要再次说明，我无意嘲笑框架作者。库很好啊，我希望看到大家一致赞同远离的是框架。原文《No more JS frameworks》中文版翻译：老码农翻译版: 日语 JS 框架看上去就像死亡和纳税，必然发生，无法避免。如果我能变成一只苍蝇趴在墙上，我就能确定每次启动一个新项目的时候，他们讨论的第一个问题肯定是：我们要用哪个 JS ...

leejan97 2019-08-21 10:24 评论0 收藏0
如何编写轻量级 CSS 框架

摘要：如今轻量级框架如雨后春笋，层出不穷。那么这些轻量级框架有没有意义呢当然有。这个轻量级框架在上有很高人气，但是说实话，用处并不大。编写轻量级框架终于到了本篇文章的重头戏。大多数的轻量级框架只是框架，不涉及部分，主要用于网页的布局。 showImg(http://images2017.cnblogs.com/blog/999445/201711/999445-201711131956147...

Dr_Noooo 2019-08-05 12:22 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

amc 2019-08-29 16:10 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

Tony_Zby 2019-07-01 10:23 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

zeyu 2019-08-02 11:03 评论0 收藏0