亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

開(kāi)發(fā)一個(gè)自己的 CSS 框架（二）

testHs / 801人閱讀

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

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

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

// 圖標(biāo)兼容
.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

然后添加圖標(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ù)組長(zhǎng)度，其實(shí)這里用 dict 字典會(huì)更好，只不過(guò)為了讓大家學(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)輔助類

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

=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

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

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

.success {
  border-color: green;
}
文字輔助類

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

.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
區(qū)塊間隔輔助類

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

.p1rem
  padding: 1rem

.m1rem
  margin: 1rem

.p51rem
  padding: .5rem 1rem

.m51rem
  margin: .5rem 1rem
居中輔助類

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

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

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

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

最后我在說(shuō)一下為什么要把這些輔助類提取出來(lái)？

首先是因?yàn)榉浅５某Ｓ?，其次，是因?yàn)榧尤氩惶崛〕鰜?lái)，使用多帶帶的一個(gè) class ，雖然這樣非常的符合語(yǔ)義化，以及結(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)注吧。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116835.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    amc 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    Tony_Zby 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    zeyu 評(píng)論0 收藏0

  • PHP程序員學(xué)習(xí)路線

    摘要：第一階段基礎(chǔ)階段基礎(chǔ)程序員重點(diǎn)把搞熟練核心是安裝配置基本操作目標(biāo)能夠完成基本的系統(tǒng)安裝，簡(jiǎn)單配置維護(hù)能夠做基本的簡(jiǎn)單系統(tǒng)的開(kāi)發(fā)能夠在中型系統(tǒng)中支持某個(gè)功能模塊的開(kāi)發(fā)。本項(xiàng)不做重點(diǎn)學(xué)習(xí)，除非對(duì)前端有興趣。 第一階段：基礎(chǔ)階段（基礎(chǔ)PHP程序員） 重點(diǎn)：把LNMP搞熟練（核心是安裝配置基本操作） 目標(biāo)：能夠完成基本的LNMP系統(tǒng)安裝，簡(jiǎn)單配置維護(hù)；能夠做基本的簡(jiǎn)單系統(tǒng)的PHP開(kāi)發(fā)；能夠在P...

    genedna 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<