Jun瘋自學

SCSS是個能用更有效率的方法來編寫CSS的程式語言
語法跟CSS大同小異，但是比CSS來得好寫且更容易閱讀

巢狀(Nesting)

愛上SCSS的主要功能之一，這個功能可以大幅減少編寫重複的開頭
透過巢狀式的結構也可以清楚的知道元素上下層的關聯性。

.box{
  width: 100%;
  margin: 0 auto;
  .title{
    padding: 10px;
    p{
      color: rgba(255, 0, 0, 1);;
    }
  }
}

編譯成CSS就會變成

.box{
  width: 100%;
  margin: 0 auto;
}
.box .title{
  padding: 10px;
}
.box .title p{
  color: rgba(255, 0, 0, 1);;
}

這個功能也可以使用在相同的屬性上面

p{
  font:{
    family: arial, sans-serif;
    size: 10px;
    decoration: none;
  }
}

編譯後
=====>

p{
  font-family: arial, sans-serif;
  font-size: 10px;
  font-decoration: none;
}

還有一個方便的功能是使用 & 符號來代替父層

.box{
  color: rgba(0, 0, 0, 1);
  &:hover{
      color: red;
  }
}

編譯後
=====>

.box{
  color: rgba(0, 0, 0, 1);
}
.box:hover{
  color: rgba(255, 0, 0, 1);
}

變數(Variables)

$ 來表示變數
變數可以用來儲存值，方便重複利用

$box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);

.box{
  box-shadow: $box-shadow;
}

編譯後
=====>

.box{
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);
}

變數也能拿來做運算

$num:5px;

.container{
margin:$num*2 $num;
}

編譯後
=====>

.container{
  margin: 10px 5px;
}

混入(Mixins)

函式可以使用在重複多行的樣式上面，像是CSS的一些新屬性就可能需要加上瀏覽器前綴，這個部分就可以透過函式來完成
要特別注意的是@mixin需要配合@include來使用
@mixin來設定要使用的樣式、@include則是套用樣式

@mixin css3-border-radius() { 
  -ms-border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -o-border-radius: 5px; 
  border-radius: 5px; 
}
.box {
@include css3-border-radius();
}

編譯後
=====>

.box {
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

函式也可以搭配參數使用讓使用上更加靈活。

@mixin css3-border-radius($i) { 
  -ms-border-radius: $i;
  -moz-border-radius: $i; 
  -webkit-border-radius: $i; 
  -o-border-radius: $i; 
  border-radius: $i; 
}
.box {
@include css3-border-radius(3px);
}

編譯後
=====>

.box {
  -ms-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

引入、匯入(Import)

在檔案中加入其他SCSS或CSS檔案，最後編譯時會一併編譯。
假如我想在某個SCSS檔案裡面匯入head、main、footer等scss的檔案就可以使用下面這段程式碼

@import "head.scss";
@import "main.scss";
@import "footer.scss"

繼承(Extend)

@extend主要是用在合併相同程式碼，假如有很多段相同的程式碼
就可以使用@extend進行合併
只要加上站位符號 % 就能讓被繼承的CSS類消失

%box {
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 10px;
  color: rgba(0, 0, 0, 1);
}

.success {
  @extend %box;
  border-color: rbga(0, 128, 0, 1);
}

.danger {
  @extend %box;
  border-color: rgba(255, 0, 0, 1);
}

編譯後
=====>

.success, .danger{
  border: 1px solid black;
  padding: 10px;
  color: black;
}

.success{
  border-color: rgba(0, 128, 0, 1);
}

.danger{
  border-color: rgba(255, 0, 0, 1);
}

函式(Functions)

SCSS中也有@function可以使用，像是@if、@for
不過我還不太熟這些…
有興趣的朋友可以查看內建函式的清單

註解(Comment)

只要在程式碼開頭加上兩條斜線//就可以加入註解。

//我是註解