iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

CSS 實戰心法系列 第 21

Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時,如果有需要新增、調整,都是寫在 CSS 的後方或是另開一個新檔透過 "覆蓋" 的特性來新增、調整。先前的文章已經介紹了如何調整 Bootstrap 的 CSS,透過變數的方式,我們可以調整整體的樣式設定,而 "新增" 我們也應該用相同的方法來製作,這樣的方法更有一致性,且能夠調用 Bootstrap 原有的變數及 @mixin。

新增一個元件

範例連結
https://github.com/Wcc723/ironman-gulp-sass/tree/v.0.7.component

先前的文章介紹到 Sass 的架構,所以我們的專案結構會做些許的調整,目前已經有了 all.scss 以及 helpers/_variables.scss 這兩隻 .scss 檔案,接下來新增 components 資料夾,預計新增的元件就會放在這裡。

scss/
|- all.scss
|
|– helpers/
|   |– _variables.scss   # Sass Variables
|
|– components/
|   |– _card.scss        # 預計新增的模組

元件來源:https://github.com/doabit/semantic-ui-sass/blob/master/app/assets/stylesheets/semantic-ui/views/_card.scss

我在 Sematic UI 上找到了一個現成的 Card 模組,這個模組所使用的變數不多,刪除後面的段落後,就可以直接加入 components/_card.scss 內。

參考加入內容:https://github.com/Wcc723/ironman-gulp-sass/blob/v.0.7.component/source/scss/components/_card.scss

/*--------------
      Card
---------------*/

.ui.cards > .card,
.ui.card {
  max-width: 100%;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 290px;
  min-height: 0px;
  background: #FFFFFF;
  padding: 0em;
  border: none;
  border-radius: 0.28571429rem;
  box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
  -webkit-transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  transition: box-shadow 0.1s ease, transform 0.1s ease;
  transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-transform 0.1s ease;
  z-index: '';
}

/* 略 .. */

新增元件的心法在前面幾個章節有詳細的描述,本篇就直接運用半成品來說明,在 _card.scss 加入後,如果直接運行 gulp 是不會看到 card 加入至你的 CSS 內,所以必須要在 all.scss 補上以下內容確認載入才行。

@import "helpers/variables";
@import "bootstrap";

@import "components/card";

此時,執行 gulp 沒有出錯的情況下就會看到 Card 模組已經載入了。以下範例為調整後的按鈕色彩及卡片模組。

http://ithelp.ithome.com.tw/upload/images/20161221/20083608Uit7VYEHMu.png

結語

透過這一段的教學,大家能夠更靈活的使用 Bootstrap,其實這段流程並沒有那麼複雜,只要稍作練習,就能夠彈性的運用這些技能,且能有效地增加工作效率。


上一篇
Sass 資料夾結構
下一篇
實戰心法 - 經常使用,但卻容易被忽視的 CSS
系列文
CSS 實戰心法30

1 則留言

0
Jackson
iT邦新手 5 級 ‧ 2016-12-21 09:44:41

/images/emoticon/emoticon14.gif

卡斯伯 iT邦研究生 3 級‧ 2016-12-21 09:45:20 檢舉

超快回的你

我要留言

立即登入留言