Sass超入門 - どん底から這い上がるまでの記録

この記事では、Sassのインストールから簡単なコードを書いてGulpで自動コンパイルするまでをやってみます。

関連リンク
前回までのあらすじ
Sass「Syntactically Awesome Stylesheets」
- Sass記法とScss記法
インストール
サスを書く
- style.sass
SassをCSSにコンパイルする

前回までのあらすじ

前回までやってきたことです。

Flaskを使い始める。ー＞Flask超入門↓Electronを使い始める。ー＞Electron超入門↓Pugを使い始める。ー＞Pug超入門↓Gulpを使い始める。ー＞Gulp超入門↓Pugの文法を少し勉強。ー＞Pug文法入門↓今ココ。

Sass「Syntactically Awesome Stylesheets」

Sass（サス）はSyntactically（構文的に）、Awesome（イケてる）、Stylesheets（スタイルシート）の略で、Sassを使うとCSSのコードを書くときと比べて、コード量を少なく見やすいコードを書くことができます。

Sass記法とScss記法

Sassには２通りの書き方があります。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

doctype html
html
  head
    include client.pug
    meta(charset='utf-8')
    link(type="text/css", rel="stylesheet", href="style.css")
    title Pug Tutorial
    
  body
      h1 Hello
      .board

head要素のなかに、CSSを読み込むためのコードを追加し、見出し要素の下にboardというクラスを追加しています。

gulpfile.js

// モジュールを読み込む
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var pug = require('gulp-pug');
var sass = require('gulp-sass'); // 新しく追加
var electron = require('electron-connect').server.create();


// 拡張子がpugのファイルが変更されたとき、実行されるタスク
gulp.task('pug', function() {
  gulp.src("*.pug")
    .pipe(plumber())
    .pipe(pug( { pretty: true })) // htmlに変換するとき見た目をきれいにする
    .pipe(gulp.dest(".")); // コンパイル先
});

// 新しく追加
gulp.task('sass', function() {
	gulp.src('*.sass')
		.pipe(plumber())
		.pipe(sass())
		.pipe(gulp.dest('.'));
});

gulp.task('default', function() {
  // Electronの開始
  electron.start();
  // ファイルの監視
  // 拡張子がpugのファイルを監視する
  // ファイルが変更されるとタスクpugが実行される
  gulp.watch('*.pug', ['pug']);
  // 新しく追加
  gulp.watch('*.sass', ['sass'])
  // 拡張子がhtmlのファイルを監視する
  // htmlのファイルが変更されると、Electronを再読み込み
  gulp.watch(['*.html', '*.css'], electron.reload);
});

新しく追加したところはコメントに書いています。gulp-sassのモジュールを読み込み、新しくsassというタスクを追加しています。

さらに、CSSのファイルが変更されるとElectronを再読み込みするようにしています。

コンパイル

これで、Sassをコンパイルする準備が整ったので以下のコマンドを作業ディレクトリで実行します。

npx gulp

コマンドを実行した後、Electronが起動します。index.pugとstyle.sassを保存し直すと、以下の画面が表示されるはずです。

f:id:pytry3g:20180731172955p:plain

ここまで、Sassのインストールから超簡単なコードを書いてCSSにコンパイルするまでをやってみました。

今後、Sassをより深堀して勉強していく予定です。

とりあえず今回はここまで。

関連リンク