こんにちは、あじゅ～くです。
ドップリ
JavaScriptやってるわけなんですが…
の続き
開発環境構築から
実際に動かすところまでやってみます。
ATOM + Node.js 編
環境設定(Windows 10)
Windows10 をターゲットにします。
① ATOM エディタ インストール
② ATOM Node.js インストール
③ ATOM node-sass プラグインインストール
④ Hello world (CSS) 書いてみる
番外編：sass-convert
エディタはすっかり慣れた Atom を利用。
本サイトの記事もAtomで書いてます。
ATOM の設定
ATOM のインストールは省きます。
インストーラでぽんって感じですので。
https://atom.io/
↑ここからダウンロードしてください。
「node.js」のインストールはこちら
Swagger Editorの記事参照♪
インストールしましたか？
では、
「node.js」コマンドプロンプトを起動します。
↓コマンドプロンプトで node-sass のインストール↓
$npm install -g node-sass
\AppData\Roaming\npm\node-sass -> \AppData\Roaming\npm\node_modules\node-sass\bin\node-sass
> node-sass@3.10.1 install \AppData\Roaming\npm\node_modules\node-sass
> node scripts/install.js
Start downloading binary at https://github.com/sass/node-sass/releases/download/v3.10.1/win32-x64-46_binding.node
Binary downloaded and installed at \AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-46\binding.node
> node-sass@3.10.1 postinstall \AppData\Roaming\npm\node_modules\node-sass
> node scripts/build.js
"\AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-46\binding.node" exists.
testing binary.
Binary is fine; exiting.
node-sass@3.10.1 \AppData\Roaming\npm\node_modules\node-sass
├── get-stdin@4.0.1
├── lodash.assign@4.2.0
├── lodash.clonedeep@4.5.0
├── async-foreach@0.1.3
├── in-publish@2.0.0
...
...
...
特に問題なく終了。
バージョンを確認します。
$node-sass -v
node-sass 3.10.1 (Wrapper) [JavaScript]
libsass 3.3.6 (Sass Compiler) [C/C++]
「node.js」と「node-sass」のインストールができたら
前準備は終了。
作業を楽にしてくれる頼もしいやつ、
「sass-autocompile」をインストールします。
「ATOM」のプラグインで
「sass-autocompile」ってのがあるので検索して、
インストールします。
ファイル⇛環境設定
↑環境設定をひらいて。
「＋Install」 を選択。
「sass-autocompile」を検索
見つかったら、
「インストール」を押下。
これで、設定完了です。
実際に sass から css を作ってみます。
拡張子が「.sass」or「.scss」の場合、
保管と同時にコンパイルして
「.css」ファイルを吐き出してくれます。
ATOMでSASS作成
前回と同じ「SASS」ファイルです。
helloworld.sass
$TXTColor: #00F
$BKColor: #F00
$Margin: 10
$Padding: 8
$BodyCalc: 5
html
background: $BKColor
body
color: $TXTColor
text-align: center
margin: $Margin - $BodyCalc
padding: $Padding - $BodyCalc
line-height: 1.4
font-family: Arial, sans-serif
font-size: 2.5em
↑ＡＴＯＭでそのまま編集できますよ
…
…
…
ここで魔法かけます。
「Ctrl + S」
…
…
…
↑「helloworld.min.css」ファイルが出来てませんか？
はい。完成！
いや～簡単ですねぇ。
ATOM のオートコンパイルプラグインをいれてますんで、
普通に、.sass ファイルを作成して保管するだけです。
保管した瞬間に、cssファイルが生成されます。
便利なプラグインですね。
成功した場合は、緑色の文字で、
構文エラーの場合は、
下部に赤文字で表示されます。
sass-convert
番外編です。
どうせなら、今まで作った（作ってないけどｗ）
CSSファイルを SASS(SCSS) で管理できないかなぁ？
出来ます
「sass-convert」 なるツールが入ってます。
$sass-convert -from css -to scss ファイル名.css NEW.sass(scss)
もうこれで管理しちゃいましょう。
というか…
WEBデザイナーになった気分だわ|дﾟ)
…
…
…
…
…
…
…
…
…
言いすぎました
…
…
…
…
…
…
…
…
すみません
WEBデザイナーの方は、
すごい知識ありそうですよね。
CSSまともに書いてたらやってられませんね。
いや、昔はこんなのなかったと思うんだけど？
「色変えて～」なんて言われたら発狂しますよね。
変数定義で「ぽんっ」
これならＯＫ
これは触れておいてよかったかも。
それでは。
