この記事では、Sassのインストールから簡単なコードを書いてGulpで自動コンパイルするまでをやってみます。
関連リンク
Sass: Syntactically Awesome Style Sheets
前回までのあらすじ
前回までやってきたことです。
Sass「Syntactically Awesome Stylesheets」
Sass(サス)はSyntactically(構文的に)、Awesome(イケてる)、Stylesheets(スタイルシート)の略で、Sassを使うとCSSのコードを書くときと比べて、コード量を少なく見やすいコードを書くことができます。
Sass記法とScss記法
Sassには2通りの書き方があります。Sass記法とScss(Sassy CSS)記法です。Sassはpythonのコーディングと似ていてインデントと改行を使ってブロックを表現します。一方ScssはCSSの書き方に似ていて{}と;を使ってブロックを表現します。現在はScssがよく使われているようですが、私はSass記法を使いたいと思います。
理由は簡単です。Sass記法はpythonに近い書き方だからです。
インストール
SassはRubyで動いているようですが、Node.jsとGulpでもコンパイルできるようです。私はRubyをインストールせずにNode.jsとGulpを使ってSassをコンパイルします。
記事の冒頭部分で書きましたが、この記事は以前書いてきた記事の続きになっています。Node.jsとGulpの環境は以下のpug-tutorial
という作業ディレクトリで構成されています。
pug-tutorial/ /node_modules gulpfile.js package.json client.js client.pug index.js index.pug index.html
Sassをインストールします。コマンドプロンプトを開き作業ディレクトリpug-tutorialに移動してから以下のコマンドを実行しています。
npm i -D gulp-sass
サスを書く
Sassのインストールが完了したので、実際にSassを書いてみてGulpで自動コンパイルしてみます。
作業ディレクトリpug-tutorial直下にstyle.sass
で作ります。
style.sass
body background: skyblue .board width: 300px height: 300px background: red position: absolute
インデントと改行でブロックを表現していることがわかります。
これから上のstyle.sassをCSSにコンパイルしてみます。
SassをCSSにコンパイルする
gulpを使ってSassをCSSにコンパイルします。そのために、index.pug
とgulpfile.js
のコードを以下のように変更する必要があります。
index.pug
head
要素のなかに、CSSを読み込むためのコードを追加し、見出し要素の下にboard
というクラスを追加しています。
gulpfile.js
新しく追加したところはコメントに書いています。gulp-sass
のモジュールを読み込み、新しくsass
というタスクを追加しています。
さらに、CSSのファイルが変更されるとElectronを再読み込みするようにしています。
コンパイル
これで、Sassをコンパイルする準備が整ったので以下のコマンドを作業ディレクトリで実行します。
npx gulp
コマンドを実行した後、Electronが起動します。index.pug
とstyle.sass
を保存し直すと、以下の画面が表示されるはずです。
ここまで、Sassのインストールから超簡単なコードを書いてCSSにコンパイルするまでをやってみました。
今後、Sassをより深堀して勉強していく予定です。
とりあえず今回はここまで。