這一期我們來新增按鈕的圖示，與常用的附加類，附加類指的是修改文字顏色、背景顏色，邊框等等。
修改 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
在 html 匯入
刪除文章
刪除文章
定義了 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-#
color: nth($colors, $i)
.bg-#
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
.success
文字對齊，文字大小，超出省略等等。
.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 多，兩著之間總要有乙個取捨，我們只能盡量找到乙個平衡點。
所有**都已完成檢視 獲取原始碼。
開發乙個自己的 CSS 框架（五）
這一期我們繼續完成我們的網格布局 通過乙個 佔位符，來減少 輸出量。container padding right 15px padding left 15px margin right auto margin left auto container width 100 extend contain...
架構漫談 自己開發乙個Log框架
在日常開發中我們常常都會用到寫日誌的功能,現在網上的寫log的框架有很多,但是對於我個人而言,過於龐大 我們往往只為了使用框架中的某乙個功能就不得不引用整個框架。所以,我們今天就來自己動手開發乙個自己的log框架。我們在專案中一般都會把日誌存到檔案 系統日誌 資料庫這個三個地方。所以,作為乙個log...
自己寫乙個框架
自己寫乙個框架 單入口mvc 類 庫 屬於擴充套件 乙個好的配置檔案和讀取功能 db介面 dispather.php index.php dispather 分析controller action 根據分析controller action 動態載入 引入乙個自動載入機制 controller.ph...