開發一個本身的 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 的節點，看看效果吧。

注：全部優質內容全網同時發佈，包括簡書、知乎、掘金、大魚號、微信號、掘金等。

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