iT邦幫忙

DAY 11
5

30天掌握Sass語法系列 第 11

30天掌握Sass語法 - (11)覺得Sass的寫法不適合你寫CSS嗎?那試試看SCSS吧!

有些人或許對SASS這種太乾淨的寫法有點無法適應,
因為他是靠TAB推進來寫CSS與階層性的,

如果你覺得SASS你不習慣,
那你可以試試看SCSS!

舉例來說我要寫的CSS是這樣的話

.header {
  height: 80px;
}
.header .logo {
  position: relative;
}
.header .logo a {
  display: block;
}
.header .logo a:hover {
  color: red;
}
.header .menu {
  width: 500px;
}

那SASS就會是這樣:
http://codepen.io/anon/pen/BaJAj

.header
	height: 80px
	.logo
		position: relative
		a 
			display: block
			&:hover
				color: red
	.menu
		width: 500px

而如果是SCSS的話,
則會是長這個樣子:
http://codepen.io/anon/pen/xHIBk

.header {
  height: 80px;
  .logo{
    position: relative;
    a{
       display: block;
      &:hover{
        color: red;
      }
    }
  }
  .menu{
    width: 500px;
  }
}

有些人或許對SASS這種太乾淨的寫法有點無法適應,
因為他是靠TAB推進來寫CSS與階層性的,

如果你覺得SASS你不習慣,
那你可以試試看SCSS!

舉例來說我要寫的CSS是這樣的話

.header {
  height: 80px;
}
.header .logo {
  position: relative;
}
.header .logo a {
  display: block;
}
.header .logo a:hover {
  color: red;
}
.header .menu {
  width: 500px;
}

那SASS就會是這樣:
http://codepen.io/anon/pen/BaJAj

.header
	height: 80px
	.logo
		position: relative
		a 
			display: block
			&:hover
				color: red
	.menu
		width: 500px

而如果是SCSS的話,
則會是長這個樣子:
http://codepen.io/anon/pen/xHIBk

.header {
  height: 80px;
  .logo{
    position: relative;
    a{
       display: block;
      &:hover{
        color: red;
      }
    }
  }
  .menu{
    width: 500px;
  }
}

雖然和傳統寫CSS很相似,
但多了很多巢狀對吧?

沒關係,我們一個一個來介紹:
1.SCSS支援傳統CSS寫法,所以如果你將副檔名.CSS改成.SCSS,他還是可以編譯成功。
2.同時也具有變數、@mixin、@extend等所有Sass功能。
3.Sass要引入@mixin時,前面加「+」就可以載入mixin,但Scss前面必須寫@include才可以使用。@extend則都是一樣使用方式
4.雖然可用傳統CSS寫法,但如果你寫CSS時後面沒有加上「;」的話,也會編譯失敗。
5.寫Mixin時,必須用{}來將範圍給包住內容。
6.寫巢狀繼承時,必須在繼承的父元素裡面撰寫class與class的css。

或許這樣說,可能大家比較沒辦法全然了解;
所以我也錄製了一段影片,來讓大家知道該如何用SCSS來撰寫,
請用720P+全螢幕瀏覽:

那到底用哪個方式來寫會比較好呢?
其實就看個人的習慣而定,
像我就不喜歡寫太多分號與大括號,
所以最後決定用Sass,

而像有些網頁設計師覺得純CSS方法他們已經改不過來了,
那就會選擇用SCSS,

用SCSS還有個很大的優勢是,
你可以直接拿現有的專案來直接套用SCSS來撰寫,
就像上面我所說的,SCSS是支援純CSS寫法的,
所以只要把原本CSS檔案改為副檔名SCSS,
你就可以拿它來開始寫SCSS編譯嘍,

純CSS專案導入SCSS的流程我也錄製了一段影片,
提供大家參考學習^_^


上一篇
30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS
下一篇
30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言