Alex宅幹嘛-SASS入門教學筆記

為何要學SASS：透過樣式學習程式觀念，透過程式撰寫樣式

特別之處：切版的人別從頭刻，不是快而是靠累積

• SASS的註解

// 不會轉譯，只有自己看得到 （推薦使用）
/**/會轉譯其他工程師看得到，效能較差

• 變數

$width : 100%;
$buttonNumber:6;
$baseLineHeight:10px;

• extend專門被繼承的樣式

%aButton{
 display: block;
 text-decoration: none
}

• function，調整參數就能改多個值

@function line($count:1){
 @return $baseLineHeight*$count;
}
//使用function參數更改padding值
.aa {
     padding:line(2); //padding:20px}
.bb {
     padding:line(1); //padding: 10px}
.cc {
     padding:line(3); //padding: 30px}

範例

//SCSS巢狀結構 * >選取下一層的第一層，空格則全選
.tabList {
   >header {
     color: red;
     >ul {
       margin: 0;
       padding: 0;
       list-style: none;
       font-size: 0px } //
       li {
          display: inline-block;
          width: $width/$buttonNumber; //使用變數
          //font-size: 16px
         >a {
           @extend %aButton; //使用繼承
           width:100%;
           height:20px;
           line-height:20px}}}
   >div {
     color: red;}
}

Mixin v.s. Extend

extend: 產出一集合大家一起共用

%aButton {
  display: block;
  text-decoration: none}
.aa { @extend %aButton }
.bb { @extend %aButton }
.cc { @extend %aButton }
//使用extend產出的css
.aa, .bb, .cc {
  display: block;
  text-decoration: none;}

mixin: 會產多份樣式，不要拿mixin去做extend的事。mixin是一個大補包、UI kit。

範例

@mixin aButton() {
  display: block;
  text-decoration: none}
.aaa { @include aButton() }
.bbb { @include aButton() }
.ccc { @include aButton() }
//使用mixin產出的css
.aaa { display: block;
       text-decoration: none;}
.bbb { display: block;
       text-decoration: none;}
.ccc { display: block;
       text-decoration: none;}

Jonas課程練習

extend推薦在element互相相關時使用（:hover,:link...）