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

nodelover發表於2018-07-14
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/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 的節點，看看效果吧。

注：所有優質內容全網同時釋出，包括簡書、知乎、掘金、大魚號、微訊號、掘金等。

掃描下面二維碼，關注微信公眾號，每週免費獲取精品前端小課連載，每週更新，還在等什麼？趕快關注吧。

相關文章