這是一個系列,帶着你們封裝一個純 CSS 框架,從零學習 SASS 語法。css
代碼倉庫點我傳送html
由於簡單,強依賴原生 Javascript 對虛擬 DOM 不友好(如 React、Vue、Angular),使用虛擬 DOM 對使用原生 Javascript 編程(JQuery)不友好。沒有代碼是最棒的代碼,部署在任何地方,運行在任何地方。前端
我會告訴我叫 IE 嗎?git
看這表情,我會騙你?github
首先你得準備一個設計稿,什麼?你沒有?npm
首先得爲 UI 選擇一些基本色調,這實際上是最核心的。當你改變一些基本配色以後,你會發現框架徹底不一樣了。編程
初始化一個 Nodejs 項目,安裝 parcel 打包工具,讓 parcel 來幫咱們處理可編譯文件,使用簡單,速度奇快,小微項目用 parcel 有如神助。瀏覽器
mkdir NicoUI && cd NicoUI
npm init -y
npm i parcel-bundler -D
複製代碼
建立開始文件sass
touch index.html index.sass
複製代碼
在 index.html 引入 index.sass 文件,咱們使用 sass 開發,最終編譯成 css。我搜索了一大圈 github 的前端項目,大多數仍是 sass 的,雖然筆者我的用的 stylus,可是爲了讓你們更好的在公司合做,這裏使用 sass 語法。bash
建立 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 的節點,看看效果吧。
注:全部優質內容全網同時發佈,包括簡書、知乎、掘金、大魚號、微信號、掘金等。
掃描下面二維碼,關注微信公衆號,每週免費獲取精品前端小課連載,每週更新,還在等什麼?趕快關注吧。