這是一個(gè)系列，帶著大家封裝一個(gè)純 CSS 框架，從零學(xué)習(xí) SASS 語法。愛掏網(wǎng) - it200.com

代碼倉庫點(diǎn)我傳送

因?yàn)楹?jiǎn)單，強(qiáng)依賴原生 Javascript 對(duì)虛擬 DOM 不友好（如 React、Vue、Angular），使用虛擬 DOM 對(duì)使用原生 Javascript 編程（JQuery）不友好。愛掏網(wǎng) - it200.com沒有代碼是最棒的代碼，部署在任何地方，運(yùn)行在任何地方。愛掏網(wǎng) - it200.com

我會(huì)告訴我叫 IE 嗎？

看這表情，我會(huì)騙你？

抄刀開干

首先你得準(zhǔn)備一個(gè)設(shè)計(jì)稿，什么？你沒有？

首先得為 UI 選擇一些基本色調(diào)，這其實(shí)是最核心的。愛掏網(wǎng) - it200.com當(dāng)你改變一些基本配色之后，你會(huì)發(fā)現(xiàn)框架完全不同了。愛掏網(wǎng) - it200.com

搭建開發(fā)環(huán)境

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

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

創(chuàng)建開始文件

touch index.html index.sass

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

創(chuàng)建 src/vars/_color.sass 定義顏色變量，在 index.sass 里面導(dǎo)入

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

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

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

初始化

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

html 設(shè)置背景色與字體大小，body 設(shè)置字體大小為 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 ，先設(shè)置一下按鈕的基本樣式，因?yàn)闃邮娇梢员?button 或者 a 標(biāo)簽使用，我們希望 a 標(biāo)簽，鼠標(biāo)是小手，而 button 不是。愛掏網(wǎng) - it200.com& 可以引用上一級(jí)別的選擇器，而假如 & 想放在后面，當(dāng)做字符串，要通過 #{} 包裹起來。愛掏網(wǎng) - it200.com

.btn
	a#{&}

會(huì)編譯成

.btn a.btn

而

.btn
	@at-root a#{&}

會(huì)編譯成

a.btn

我們按照設(shè)計(jì)的，添加邊框與顏色，以及添加 hover 的顏色加深，darken 是 sass 內(nèi)置的函數(shù)，第一個(gè)參數(shù)是顏色，第二個(gè)參數(shù)是加深的百分比。愛掏網(wǎng) - 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

然后我們?cè)俳o按鈕添加顏色，現(xiàn)在我們先寫一個(gè)。愛掏網(wǎng) - 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

寫好了之后，我們通過循環(huán)，把所有的顏色都補(bǔ)全，$colors 是一個(gè)字典，是一個(gè)鍵值對(duì)，可以理解為 JavaScript 里面的對(duì)象。愛掏網(wǎng) - it200.com通過 @each 遍歷字典，拿到 key 和 value，設(shè)置相應(yīng)的值即可。愛掏網(wǎng) - 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 添加一些對(duì)應(yīng) class 的節(jié)點(diǎn)，看看效果吧。愛掏網(wǎng) - it200.com

原文發(fā)布時(shí)間為：2024年07月01日

本文作者：nodelover