當(dāng)前位置：首頁 >

开发一个自己的 CSS 框架（二）

發(fā)布時(shí)間：2025/6/17 72 豆豆

生活随笔收集整理的這篇文章主要介紹了开发一个自己的 CSS 框架（二）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

這一期我們來添加按鈕的圖標(biāo)，與常用的附加類，附加類指的是修改文字顏色、背景顏色，邊框等等。

修改 src/button.sass 給圖標(biāo)與文字之間添加一些間距。

// 圖標(biāo)兼容 .btni.icondisplay: inline-blockwidth: .9rem&.rightpadding-left: .5rem&.leftpadding-right: .3rem&.large i.icon&.rightpadding-left: .7rem&.leftpadding-right: 1.3rem

然后添加圖標(biāo)，這里我們直接使用 ionic 提供的圖標(biāo)。

在 html 導(dǎo)入

在這里可以找到文檔 https://ionicons.com/usage ，然后我們像這樣去使用它。

添加顏色輔助類

定義了 2個(gè)數(shù)組，從數(shù)組里面取元素的時(shí)候用 nth 方法，through 可以構(gòu)造一個(gè)區(qū)間，length 方法可以取到數(shù)組長度，其實(shí)這里用 dict 字典會(huì)更好，只不過為了讓大家學(xué)到更多的知識(shí)點(diǎn)，所以用了 @for 循環(huán)的方式。text 修改的是文字顏色，bg 修改的是背景顏色。

$colors: $dark, $light, $gray, $blue, $deep-blue, $red, $yellow, $green $names: 'dark', 'light', 'gray', 'blue', 'deep-blue', 'red', 'yellow', 'green'@for $i from 1 through length($colors).text-#{nth($names, $i)}color: nth($colors, $i).bg-#{nth($names, $i)}background: nth($colors, $i)

添加清浮動(dòng)輔助類

以 = 開頭的是一段 mixin，即可混合對(duì)象，它表示一個(gè)可復(fù)用的一個(gè)函數(shù)，它可以接受參數(shù)，這里因?yàn)闆]有參數(shù)，所以可以省略。

=clearfix&::aftercontent: ' 'display: tableclear: both.clearfix+clearfix

還有另外一種 @extend 繼承。

%message-sharedborder: 1px solid #cccpadding: 10pxcolor: #333.message@extend %message-shared.success@extend %message-sharedborder-color: green

會(huì)編譯成，這樣表示選擇器的復(fù)用，多個(gè)選擇器應(yīng)用同一個(gè)樣式。

.message, .success {border: 1px solid #cccccc;padding: 10px;color: #333; }.success {border-color: green; }

文字輔助類

文字對(duì)齊，文字大小，超出省略等等。

.text-righttext-aligh: right.text-lefttext-align: left.f8font-size: .8rem .f9font-size: .9rem .f1font-size: 1rem .f12font-size: 1.2rem .f14font-size: 1.4rem.text-ellipsiswhite-space: nowrapoverflow: hiddentext-overflow: ellipsis

區(qū)塊間隔輔助類

內(nèi)邊距與外邊距

.p1rempadding: 1rem.m1remmargin: 1rem.p51rempadding: .5rem 1rem.m51remmargin: .5rem 1rem

居中輔助類

一個(gè)是基于 absolute 居中，一個(gè)是基于 flex 居中，flex 居中樣式必須放在父類上。

.ab-centerposition: absolutetop: 50%left: 50%transform: translate(-50%,-50%).fx-centerdisplay: flexalign-items: centerjustify-content: center

最終結(jié)果，果然彩虹。

最后我在說一下為什么要把這些輔助類提取出來？

首先是因?yàn)榉浅５某Ｓ?#xff0c;其次，是因?yàn)榧尤氩惶崛〕鰜?#xff0c;使用單獨(dú)的一個(gè) class ，雖然這樣非常的符合語義化，以及結(jié)構(gòu)與樣式分離，但是會(huì)導(dǎo)致樣式非常多。

要么 css 多，要么 html class 多，兩著之間總要有一個(gè)取舍，我們只能盡量找到一個(gè)平衡點(diǎn)。

所有代碼都已完成查看 https://github.com/MiYogurt/N... 獲取源碼。

掃描下面二維碼，關(guān)注微信公眾號(hào)，每周免費(fèi)獲取精品前端小課連載，每周更新，還在等什么？趕快關(guān)注吧。

總結(jié)

以上是生活随笔為你收集整理的开发一个自己的 CSS 框架（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。