CSS 小技巧之一：float 與 BFC，側欄固定寬度

通常在左右兩欄並排，.child1 30% ，.child2 70%。
我們會在兩個區塊下 float: left ，如下圖所示：

 .parent {

 }

 .child1 {
  float: left;
  width: 30%;
 }

 .child2 {
  float: left;
  width: 70%;
 }

JQuery 關於事件委派與 stopPropagation

寫過 javascript 的人多少都會知道冒泡的原則，例如 click li，同時也會 click 到 ul，這個事件會一直往上傳遞。
但有時候我們不想讓 li 的 click 事件上傳遞，就會使用到 stopPropagation() 方法，例如：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('li').on('click', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

此時 li 的click 事件就不會往上傳遞，但如果我們使用 on 委派事件給父元素，stopPropagation() 方法就有一些值得提醒的潛規則：

SCSS @include、@mixin 與 @content

@include 與 @extend 有點類似，但與 @extend 不同的是，@include 方法可以接受變數。
我們需要先定義 @mixin，並且在使用的時候用 @include 去呼叫，請見以下：

 @mixin border-radius($int: 4px) { //使用 @mixin 定義一個 border-radius 方法，變數預設值是 4px
  border-radius: $int;
  display: block; 
 }

 .a {
  @include border-radius(10px); //使用 @include 呼叫 border-radius 方法，變數是 10px
  display: block; 
 }

 .b {
  @include border-radius(); //個例子沒有置入變數，因此會使用預設值
  display: block; 
 }

SCSS @extend 與 %

@extend 可以讓現有的選擇器規則，套用至另一個選擇器中，例如我撰寫一個按鈕的樣式如下：

.btn {
    display: inline-block;
    padding: 6px 12px;
}

名偵探的夢

一位頗有份量的黑道大哥，請我們三五朋友吃飯，說是成功的將事業交棒給小兒子，得好好慶祝。雖然我的職業是偵探，但工作上這位大哥常給我不少線索，因此感情還算是可以。

才吃完飯，大嫂急急忙忙的打發我們回家，直到回家半路上，才突然想起手機遺忘在大哥家，幸虧走得還不遠，再回去拿就是了。

SCSS 函式與判斷

作為一種語言，SCSS 當然也有 function。
SCSS function 會處理丟進來的參數，並返回一個值。

SCSS 內建了許多關於顏色的 function，例如加深/加亮，我們可以這麼寫：

a {
    color: darken(#08c, 10); //#08c 變暗10個單位
}