uncategorized

Visual Studio Code寫SCSS,並自動編譯為CSS

早期都用Sublime來寫Compass或是SCSS,畢竟透過這類工具寫這種CSS有很多套件且又可以自動幫我編譯成CSS,用起來還滿順手,不過,隨著Visual Studio Code越來越強大,且套件可安裝也越來多,重點還可以是中文的

要開始寫SCSS前,記得必須安裝SCSS相關套件,基本上在Visual Studio Code的Marketplace上可以找到很多,再來就必須在你電腦上安裝好Node.jsnpm工具,要把SCSS編譯成CSS,必須靠這兩個工具幫忙

開始設定Visual Studio Code


可以在VS Code中安裝npm套件,這樣可以在VS.Code內執行npm指令

Ctrl+Shift+P開啟命令列,並執行下面指令,開始安裝Sass相關套件,記得網路要通,因為會到Github上抓取套件

1
npm install -g node-sass less

這時候寫一個簡單的SCSS程式

1
2
3
4
5
6
7
8
9
.A1 {
.A2 {
width: (100/2)px;
height: 100px;
}
.A2 {
color: red;
}
}

偵錯地方開啟task選擇Configure Task Runner

再選擇設定Other

Task.json檔案中設定如下

1
2
3
4
5
6
7
8
9
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node-sass",
"isShellCommand": true,
"args": ["test.scss", "test.css"],
"showOutput": "always"
}

設定完成後,會在跟SCSS檔案同目錄下多出一個.VSCode的目錄裡面會有一個Task.Json檔案,然後用Ctrl+Shift+B開始編譯,最明顯地方在於(100/2),這邊在CSS會等於是50,所以,看編譯完成後得CSS檔案,這樣就完成編譯成CSS

1
2
3
4
5
6
.A1 .A2 {
width: 50 px;
height: 100px; }

.A1 .A2 {
color: red; }

自動編譯CSS


上面方式可以讓SCSS編譯為CSS,但這還不好,因為每次都要用Ctrl+Shift+B編譯它,似乎又很麻煩,如果可以自動編譯就更好了,所以,要再安裝兩個套件,一樣可以直接在VS.Code去執行指令

1
2
npm install -g gulp
npm install gulp gulp-sass gulp-less

安裝完畢後,在和SCSS同一個目錄下又會多出node_module目錄,裡面會有gulp相關指令,這時候還沒有完畢,必須在主目錄下產生一個gulpfile.js檔案,並在檔案中設定下面指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});

gulp.task('default', ['sass'], function() {
gulp.watch('*.scss', ['sass']);
})

如果想要監控主目錄下所有的資料夾,可以修改成/**/*.scss

1
2
3
4
5
6
7
8
9
10
11
gulp.task('sass', function() {
gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});

gulp.task('default', ['sass'], function() {
gulp.watch('./scss/**/*.scss', ['sass']);
})

若是想要把輸出的.CSS檔案換成自己想要的目錄,把原本這一段

1
2
3
gulp.dest(function(f) {
return f.base;
}

換成

1
.pipe(gulp.dest('./CSS/'))

之後再回去修改原本的Task.json,讓它去監控同目錄下的SCSS檔案,當檔案有變更時候,能自動進行編譯

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
"isBuildCommand": true,
"showOutput": "always",
"isWatching": true
}
]
}

都設定完成後依舊還是必須執行Ctrl+Shift+B,這時候可以發現Output視窗,每當你有修改SCSS並儲存後,就會開始編譯,因為這時候已經啟動Watch File機制了,另外,Watch資料機制必須在啟動Watch前把資料夾建立好,如果在啟動Watch後建立資料夾,這樣該資料內的SCSS就不會更新,必須重新啟動Watch指令了