SASS基本語法範例

最近想在 ASP.NET 專案使用 SASS 取替自己寫了很久的 CSS(畢竟少打很多字也有更多的彈性)，突然才發現 SASS 語法又忘了一大半，不過在 ASP.NET 上好像.sass 不支援 intellisense ，有人會的話也請不吝賜教，這裡留個簡單例子來提醒快半腦殘的自己^^。言歸正傳，SASS 其實最終需要再解析回 CSS 但在寫法上不但支援 SCSS @變數，利用 tab 嵌入以減少使用大括號的寫法，更是讓 SASS 成為攻城獅學會後再也無法接受CSS 的一大要素。下面例子為一個簡單的 TabSelect 並讓其具有 hover 的特性，游標指到時字體Color 改為黃色並向上 1em 顯示..

HTML:

<ul>
  <li>Hello1</li>
  <li>Hello2</li>
  <li>Hello3</li>
  <li>Hello4</li>
  <li>Hello5</li>
</ul>


SASS:

body,html
  background: black
ul
  display: flex
  list-style: none
  align-items: center
  align-content: center
  vertical-align: middle
  margin: 50px
  padding: 12px
  width: 850px
  height: 150px
  li    
    width: 150px
    margin: 5px
    padding: 12px
    text-align: center
    &:nth-of-type(1),    // & 指 parent，這裡就是指 li
    &:nth-of-type(2),
    &:nth-of-type(3),
    &:nth-of-type(4),
    &:nth-of-type(5)  
      color: blue
      &:hover    
        color: yellow
        transform: translate(0,-1em)    // transform 特效，向上 1em 顯示