開發一個自己的 CSS 框架（一），開發css框架

這是一個系列，帶著大家封裝一個純 CSS 框架，從零學習 SASS 語法。愛掏網 - it200.com

代碼倉庫點我傳送

因為簡單，強依賴原生 Javascript 對虛擬 DOM 不友好（如 React、Vue、Angular），使用虛擬 DOM 對使用原生 Javascript 編程（JQuery）不友好。愛掏網 - it200.com沒有代碼是最棒的代碼，部署在任何地方，運行在任何地方。愛掏網 - it200.com

我會告訴我叫 IE 嗎？

看這表情，我會騙你？

抄刀開干

首先你得準備一個設計稿，什么？你沒有？

首先得為 UI 選擇一些基本色調，這其實是最核心的。愛掏網 - it200.com當你改變一些基本配色之后，你會發現框架完全不同了。愛掏網 - it200.com

搭建開發環境

初始化一個 Nodejs 項目，安裝 parcel 打包工具，讓 parcel 來幫我們處理可編譯文件，使用簡單，速度奇快，小微項目用 parcel 有如神助。愛掏網 - it200.com

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

創建開始文件

touch index.html index.sass

在 index.html 引入 index.sass 文件，我們使用 sass 開發，最終編譯成 css。愛掏網 - it200.com我搜索了一大圈 github 的前端項目，大多數還是 sass 的，雖然筆者個人用的 stylus，但是為了讓大家更好的在公司合作，這里使用 sass 語法。愛掏網 - it200.com

創建 src/vars/_color.sass 定義顏色變量，在 index.sass 里面導入

@import './src/vars/_color.sass'

美美噠顏色，彩虹一樣。愛掏網 - it200.comsass 的變量以 $ 開頭，賦值與 css 相同，后面的 !default 代表它是可覆蓋的。愛掏網 - it200.com

添加重置樣式，保證所有瀏覽器默認樣式的一致性，可以在 https://github.com/jgthms/minireset.css 找到最簡潔的一個版本。愛掏網 - it200.com把里面的 sass 文件復制過來，存到 src 目錄下，導入到 index.sass 中。愛掏網 - it200.com

初始化

全局樣式的初始化，比如基本行高，文字大小，字體樣式等。愛掏網 - it200.com新建 src/initinal.sass 文件，在 index.sass 導入它。愛掏網 - it200.com

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 不是。愛掏網 - it200.com& 可以引用上一級別的選擇器，而假如 & 想放在后面，當做字符串，要通過 #{} 包裹起來。愛掏網 - it200.com

.btn
	a#{&}

會編譯成

.btn a.btn

而

.btn
	@at-root a#{&}

會編譯成

a.btn

我們按照設計的，添加邊框與顏色，以及添加 hover 的顏色加深，darken 是 sass 內置的函數，第一個參數是顏色，第二個參數是加深的百分比。愛掏網 - it200.com

.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

然后我們再給按鈕添加顏色，現在我們先寫一個。愛掏網 - it200.com

.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 里面的對象。愛掏網 - it200.com通過 @each 遍歷字典，拿到 key 和 value，設置相應的值即可。愛掏網 - it200.com

$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 的節點，看看效果吧。愛掏網 - it200.com

原文發布時間為：2024年07月01日

本文作者：nodelover