【超便利】Sassの導入方法を紹介してみる

プログラミング

こんにちは

sassの導入方法が複雑だったので紹介したいと思います。

スポンサーリンク

sassとは

sassとはcssを簡単に効率よく書くことができるcssのメタ言語です。

メタ言語とは、簡単にいうとパワーアップしたもののことです。

なんのこっちゃわからないかと思いますが、使い始めるとこれ無しではcss書けなくなるくらい効率的に作業を進めることができます。

Sassの導入~下準備~

プロジェクトフォルダ作成

まず、どこかに適当なプロジェクトフォルダを作ります。

この中で作業を進めていきます。

さらにその中に「css」という名前のフォルダと「sass」という名前のフォルダを作ります。(中身はからです)

Project
|-css(なにも入れない)
|_sass(なにも入れない)

これがないとエラーを起こします。

node.jsの導入

次に、node.jsを導入します。rubyでの導入もありますが、やったことないので省略します。(ごめんなさい)

Node.jsの公式サイトに行って推奨の方をインストールしましょう!

node.jsはsassを始め、いろんなものをインストールするときに使います。

gulpのインストール

次にpowershellを開いて以下のコードを入力してください。

npm install -g gulp-cli

gulpはsassファイルをcssファイルに変換するために使います。(コンパイルといいます)

プロジェクトフォルダをいじる

プロジェクトフォルダに移動

次にpowershellでプロジェクトフォルダに移動します。

cd Project

pakage.json

移動したら次に以下のコマンドを入力しましょう。

npm init -y

ここでpakage.jsonができたら成功です。

モジュールをインストール

gulp、gulpsassモジュールをインストール

モジュールとは色々な機能をまとめてあるファイルのことです。

pythonでもモジュールという言葉が出てきましたが、ここでも同じと考えていいと思います。

ここではコンパイルを行うgulpモジュールとgulpsassモジュールをインストールします。

以下のコードを入力してください。

npm install --save-dev gulp

npm install --save-dev gulp-sass

これらのモジュールはnode_modulesというフォルダの中に入っています。

gulpfileの作成

次にgulpfileを作成します。

これはコンパイルの方法や順番を記したものです。

gulpfile.jsというファイルをプロジェクトフォルダの中に作ります。(まだ中身は何も書いていなくていいです。)

次に以下のコードを入力してください。

// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");

gulp.task("sass", function() {
    return (
      gulp.src("./sass/**/*.scss")
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(gulp.dest("css"))
    );
});

実践!

stylesheet.scss

ここまででsassの準備できました!

ではさっそくsassを書いていきましょう!

まず、先ほど作ったsassフォルダの中にstylesheet.scssというファイルを作り、以下のコードを入力してください。

ul{
 background: red;
  li{
   color: blue;
  }
}

コンパイル

では次にpowershellに入ってコンパイルを行います。

powershellでプロジェクトフォルダに入って以下のコードを入力してください。

gulp sass:watch

確認

では、cssフォルダを見てみましょう。

以下のようなstylesheet.cssというファイルができていたら成功です!

ul {
  background: blue;
}

ul li {
  color: blue;
}

まとめ

これであなたもいよいよsassが使えます!!

sassは慣れるまでにほんの少し大変ですが、慣れてしまうと非常に効率よくCSSを書くことができます!

しかし残念ながら、これだけではsassの力を十分に発揮できているとは言えません。

さらにモジュールを追加していくことでsassは真価を発揮します。

おすすめのモジュールは下の記事で詳しく説明していますので、もしよかったら見ていってください。

参考

Windowsにgulpを導入してsassをコンパイルするまでの手順 | B-side Journal
  Windowsにgulpを導入してsassファイルをコンパイルするには、 大きく分けて3つの手順が必要になります。   【手順1】 作業するパソコンにNode.jsとgulpをインストールする & …
タイトルとURLをコピーしました