コンパイラかく語りき

import { Fun } from 'programming'

Sass(SCSS)の導入方法

どうも!chuckです。

今こちらを消化してます。

tech.recruit-mp.co.jp

 

ホントはReact.jsをやりたいんだけど、自分にはまだ早いのかなーと思います。たぶん入門講座に従ってやればそれなりにできるんだと思う。

でも、自分ってまだjQueryしか知らない。AngularJSもTypeScriptも分からない。

 

というわけで、上記のサイトにお世話になることにしたわけです。

 

 

が、しかし!!!

 

思いっきり入り口で躓く(つд⊂)エーン

 

 

まずね、3つファイルを用意するんですよ。

index.html ←わかる。ただのHTMLファイル

main.scss ←ん??cssじゃなくてscssか。まっRailsチュートリアルでやったし♪

Main.ts     ←これがTypeScriptってやつか!!がんばるぞ!ヽ(`Д´)ノうおおおおお!

 

 

と思いきや、scssの段階で足止めを食らう。

 

TypeScript以前の問題だった。。

 



Railsチュートリアルで書いたscssって、Rails側で変換してくれてたんでしょうね(たぶん)

ふだんフロントエンドで使う分には自分でコンパイルする必要があるみたいです。

 

参考になった記事↓↓

liginc.co.jp

 

さすがLIG様...!!

こんなひとりぼっちプログラマーにも光を与えてくださるなんて。。。涙

 

LIG様の記事によると、Sassを使うにはRubyが必要みたいですね!

Macの場合はデフォルトで入っているのでインストール不要です!ε-(´∀`*)ホッ

 

そしてターミナルから

$ gem install sass

とコマンド入力。ちょっと待つとダウンロードされます。

 

$ sass -v

とコマンド入力して

Sass 3.4.14

のようにバージョンが表示されればインストール成功です!

 

以上でSassの導入の終了です。

 

Sassを実際に使うには、

$ sass hoge.scss:hoge.css

のように入力してコンパイルします。すると、hoge.scssに対応したcssファイルが作成されますので、これをHTML内にインクルードすればいいようです。

ちなみに、真ん中の記号はセミコロンではなくコロンなので要注意!

 

sassのコマンドについてはこちらが参考になりました↓↓

Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト

他にも圧縮ファイルとしてcssファイルを作成するなど、いくつかオプションがあるようです!