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

funnyZhang 發布于2019-08-30 15:54 / 1071人閱讀

摘要：當你改變一些基本配色之后，你會發現框架完全不同了。的變量以開頭，賦值與相同，后面的代表它是可覆蓋的。通過遍歷字典，拿到和，設置相應的值即可。

這是一個系列，帶著大家封裝一個純 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 的節點，看看效果吧。

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

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

云服務器 GPU云服務器怎么搭建一個自己的視頻網站如何搭建一個自己的服務器如何搞一個自己的hyp加速專線開發框架的搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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
關于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