當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2025/6/17 CSS 50 豆豆

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

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

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

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

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

在 html 導入

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

添加顏色輔助類

定義了 2個數組，從數組里面取元素的時候用 nth 方法，through 可以構造一個區間，length 方法可以取到數組長度，其實這里用 dict 字典會更好，只不過為了讓大家學到更多的知識點，所以用了 @for 循環的方式。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)

添加清浮動輔助類

以 = 開頭的是一段 mixin，即可混合對象，它表示一個可復用的一個函數，它可以接受參數，這里因為沒有參數，所以可以省略。

=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

會編譯成，這樣表示選擇器的復用，多個選擇器應用同一個樣式。

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

文字輔助類

文字對齊，文字大小，超出省略等等。

.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

區塊間隔輔助類

內邊距與外邊距

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

居中輔助類

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

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

最終結果，果然彩虹。

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

首先是因為非常的常用，其次，是因為加入不提取出來，使用單獨的一個 class ，雖然這樣非常的符合語義化，以及結構與樣式分離，但是會導致樣式非常多。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。