iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

關於我的佛系SCSS開發系列 第 3

鐵人賽03天Placeholder Selectors

今天是鐵人賽第三天要來講的這個%(占位)的用法,

本日還是來點負能量,下班還要寫文章好累,不能開心當個小廢物嗎(X

以下我們還是用例子快速來說明

編譯前
.icon-state { 
transition: background-color ease .2s; margin: 0 .5em; 
} 
.error-icon-state { 
@extend .icon; /*錯誤指定樣式... */ 
} 
.info-icon-state { 
@extend .icon; /* 訊息指定樣式... */ 
}
編譯後
.icon-state, .error-icon-state, .info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}

.error-icon-state {
  /*錯誤指定樣式... */
}

.info-icon-state {
  /* 訊息指定樣式... */
}

上面這個範例,神奇的跟我們預想結果不太一樣,icon-state用來繼承用的,預期不需要讓他編譯出來,神奇他還是有編譯,跟我們設定樣式規則歸類同一群去了,為了不讓我用們共用的屬性編譯出來,這時候就可以使用%placeholder

下面這個範例我們會使用%placeholder

編譯前
%icon-state {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon-state {
  @extend %icon-state;
  color: #f00;
  /*錯誤指定樣式... */
}
.info-icon-state {
  @extend %icon-state; 
  /* 訊息指定樣式... */
  color: green;
}
.icon-state {
  width: 40%;
  color: #f00;
}

編譯後
.error-icon-state, .info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}

.error-icon-state {
  color: #f00;
  /*錯誤指定樣式... */
}

.info-icon-state {
  /* 訊息指定樣式... */
  color: green;
}

.icon-state {
  width: 40%;
  color: #f00;
}

透過這樣的佔位符號,讓預設icon-state是設定一個預設狀態,不會有編譯出來屬性跟名稱,增加我們在使用上的彈性,既使我們使用了跟我們共用屬性一樣名字,也是可以正常編譯,如果我們使用@mixin方式,會在編譯後產生大量重複的狀況,下面我們就用一個簡單例子稍微來看一下,用mixin會產生怎樣結果

編譯前
@mixin icon-state {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon-state {
  @include icon-state; /*錯誤指定樣式... */
}
.info-icon-state {
  @include icon-state; /* 訊息指定樣式... */
}

.icon-state {
  width: 40%;
  color: #f00;
}
編譯後
.error-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
  /*錯誤指定樣式... */
}

.info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
  /* 訊息指定樣式... */
}

編譯結束就是這樣一坨,沒有把一些共用屬性抽離出來,而這樣佔位功能可以解決這樣的問題,至於@mixin和@extend,我們還是先富奸一下,後面會講到的


上一篇
鐵人賽02天property declarations
下一篇
鐵人賽04天@extend
系列文
關於我的佛系SCSS開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言