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

testHs 發布于2019-08-30 15:54 / 750人閱讀

摘要：還有另外一種繼承。區塊間隔輔助類內邊距與外邊距居中輔助類一個是基于居中，一個是基于居中，居中樣式必須放在父類上。

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

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

// 圖標兼容
.btn
  i.icon
    display: inline-block
    width: .9rem
    &.right
      padding-left: .5rem
    &.left
      padding-right: .3rem
  &.large i.icon
    &.right
      padding-left: .7rem
    &.left
      padding-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
  &::after
    content: " "
    display: table
    clear: both
    
.clearfix
  +clearfix

還有另外一種 @extend 繼承。

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

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

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

.success {
  border-color: green;
}

文字輔助類

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

.text-right
  text-aligh: right

.text-left
  text-align: left

.f8
  font-size: .8rem
.f9
  font-size: .9rem
.f1
  font-size: 1rem
.f12
  font-size: 1.2rem
.f14
  font-size: 1.4rem

.text-ellipsis
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

區塊間隔輔助類

內邊距與外邊距

.p1rem
  padding: 1rem

.m1rem
  margin: 1rem

.p51rem
  padding: .5rem 1rem

.m51rem
  margin: .5rem 1rem

居中輔助類

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

.ab-center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)

.fx-center
  display: flex
  align-items: center
  justify-content: center

最終結果，果然彩虹。

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

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

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

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

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

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116835.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論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
PHP程序員學習路線

摘要：第一階段基礎階段基礎程序員重點把搞熟練核心是安裝配置基本操作目標能夠完成基本的系統安裝，簡單配置維護能夠做基本的簡單系統的開發能夠在中型系統中支持某個功能模塊的開發。本項不做重點學習，除非對前端有興趣。第一階段：基礎階段（基礎PHP程序員）重點：把LNMP搞熟練（核心是安裝配置基本操作）目標：能夠完成基本的LNMP系統安裝，簡單配置維護；能夠做基本的簡單系統的PHP開發；能夠在P...

genedna 2019-06-27 16:06 評論0 收藏0