一場發現               之旅

呈現

請自備飲料爆米花，千萬不要忘記按下喜歡並訂閱加分享，最後請記得點小鈴鐺

什麼是 Sass ?

一段剪髮過程的領悟

Sass v.s. Scss

我們都沒錯，只是不適合

Sass v.s. Scss

我們都沒錯，只是不適合

nav
  float:left
  a
    display:inline-block
nav{
  float:left;
  a{
    display:inline-block;
  }
}

為什麼要用 Sass ?

天下武功，無堅不摧，唯快不破

Sass 有何特別之處?

傷心的人別聽慢歌，切版的人別從頭刻

切版的人別從頭刻

你寫的太多了  你切的太慢了 你做的太傻了


每次都 搞到 Deadline 要來了


OH~ OH~


因為你從頭刻 一個一個字刻 刻的心如刀割


是不是 該換一種 節奏了

OH~ OH~

變數 ( Variable )

寶貝～因為愛你，所以取你

繼承 ( Extend )

不能說很像，根本就一樣

繼承 ( Extend )

不能說很像，根本就一樣

韓國 宋承憲

新店 送橙線

繼承 ( Extend )

不能說很像，根本就一樣

韓國 宋承憲

新店 送橙線

函式 ( Function )

你才數學系，你全家都數學系

混用 ( Mixin )

混在一起做撒尿牛丸，我吃完考試都一百分呢

其他 ( Others )

巢狀、變數管理、載入、判斷、迴圈...族繁不及備載

怎麼開始用 Sass ?

請站穩踏階，緊握扶手

1.環境、軟體與外掛

環境：Node.js

軟體：VS Code

外掛： Live Server、Live Sass Compiler

2.軟體設定


  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/style"
    },
    {
      "extensionName": ".min.css",
      "format": "compressed",
      "savePath": "/dist/style"
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],

讓我們開始吧 !!!

Made with Slides.com