こんにちは
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は真価を発揮します。
おすすめのモジュールは下の記事で詳しく説明していますので、もしよかったら見ていってください。
参考

コメント
[…] 前回の続きです。 […]