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