Sass教學-環境、寫法篇

-

簡介：
Sass 是一個 CSS 預處理器，而它有兩種撰寫的風格
  • 一個是 SASS
  • 另一個就是 SCSS(較常使用這種寫法，原因是跟原本css寫法類似，較為直覺好懂)

Sass常見編譯方式主要有下面三種
1.軟體編譯  EX：prepros
2.gulp、webpack 前端任務/打包工具
3.編輯器內建的插件

接下來，就讓我們開始實作吧!
一、編輯器：sublime text3
1.為了讓 Sublime Text 3 支援 Sass、Scss 語法，請安裝 Sass、Scss Plugin

2.環境建置篇：
先下載prepos   前端軟體-Prepos介紹

安裝完成後，請將資料夾丟進prepos內 如下圖所示
接著，新增一個資料夾Sass，並在裡面放進一隻.scss檔案
如果畫面右下角有出現success就表示有成功~
3.sublime 內部編輯方式
1.將all.scss檔案開啟 放置左邊
2.將以編譯好的all.css放置右邊(方便同時觀看)

如此，prepos就會幫我們將程式碼編譯為如下

二、編輯器Vscode
在vscode中新增一個xxx.scss檔案，並記得按下左下角watching即可及時編譯喔
  • scss語法(目的：減少重複元素撰寫)
將子階層內容直接寫進父元素中 如下  codepen練習連結
.header{
    width: 100px;
    a{
        display: block;
        :hover{
            background: green;
        }
    }
}

備註：1.不用括號和逗點  2.每往下一個階層都需要兩個空白或是一個tab
.header
    height: 10px
    width: 50px
    color:white
    li
        width: 100px
        a
            width: 50px

記得:後要空一個(沒有空的話，會顯示編譯成功，但程式碼不會出現)
成功的話，會出現下圖


小結論：
1.
2.編譯錯誤記得去prepos log中看錯誤在哪~~

留言

張貼留言