Permalink
Browse files

Modify post 90

- Add VS Code Plugin
- Add Dw Compiler, Sass version
- Modify data table, content phrases
  • Loading branch information...
oti committed Sep 20, 2017
1 parent 640b1a1 commit 9d5a5c0061be8359d5e2fd6b054f3fcacefccc57
Showing with 107 additions and 16 deletions.
  1. +1 −1 src/json/posts.json
  2. +106 −15 src/md/post/90.md
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -44,6 +44,14 @@ Configure Task Runnerでtasks.jsonにコンパイルコマンドを記述する
[CSS, Sass and Less | Visual Studio Code Docs - #SassとLessをCSSに変換](https://vscode-doc-jp.github.io/docs/languages/css.html#Sass%E3%81%A8Less-Less%E3%82%92CSS%E3%81%AB%E5%A4%89%E6%8F%9B)
<ins datetime="2017-09-10T13:05+09:00">と思ったらLive Sass CompilerとEasy Sassという2つのプラグインがあった。どちらもLibSassを元にしたsass.jsがコンパイラとなっている。Requirementsなど特にないので、Electronで作られているところのVisual Studio Codeの内部のNode.jsを使っているもよう。つまりプラグインを入れるだけでSass/SCSSがコンパイルできる。[ますぴっぴありがとう](https://twitter.com/masuP9/status/910140584295260160)。</ins>
<ins datetime="2017-09-10T13:05+09:00">[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)</ins>
<ins datetime="2017-09-10T13:05+09:00">[Easy Sass](https://marketplace.visualstudio.com/items?itemName=spook.easysass)</ins>
<aside><ins datetime="2017-09-10T13:05+09:00">LLVMをJavaScriptにコンパイルできる[emscripten](https://github.com/kripken/emscripten)で[LibSassをJSに変換したものがsass.js](https://github.com/medialize/sass.js#sassjs)だそうだ。[ブラウザで読み込んで利用できる](https://github.com/medialize/sass.js/blob/master/docs/getting-started.md#using-sassjs-in-the-browser)らしい。</ins></aside>
## WebStorm
特にプラグインは必要なく、File Watcherを利用する。しかしコンパイラを自分でインストールしなければならない。メニューからTools -> File Watchersを新規に作成し、ProgramやらArgumentsやらを入力していく。
@@ -57,37 +65,116 @@ LibSassを使うこともできる。[自分でインストールしてビルド
## Brackets
brackets-sassと言うプラグインがある。BracketsはNode.jsを同梱しているし、このプラグインにnode-sassが含まれてる(厳密にはプラグインをインストール後のビルド時に`npm install node-sass`が実行される)ので、プラグインをインストールしただけでSassコンパイルが可能になる。[ソースファイルや出力先の設定は`.brackets.json`で指定する](https://github.com/jasonsanjose/brackets-sass#sample-bracketsjson-file)。
brackets-sassと言うプラグインがある。BracketsはNode.jsを同梱しているし、このプラグインにnode-sassが含まれてる(厳密にはプラグインをインストール後のビルド時に`npm install node-sass`が実行される)ので、プラグインをインストールしただけでSass/SCSSコンパイルが可能になる。[ソースファイルや出力先の設定は`.brackets.json`で指定する](https://github.com/jasonsanjose/brackets-sass#sample-bracketsjson-file)。
[brackets-sass](https://github.com/jasonsanjose/brackets-sass)
注意点がひとつ。brackets-sassのstableがコンパイルに利用する[LibSassのバージョンは3.1](https://github.com/jasonsanjose/brackets-sass#compiler-compatibility)となっており、[このバージョンのRuby Sassとの互換性は50%を切っている](http://sass-compatibility.github.io/#stats)。
CLIでプラグインのディレクトリに移動して、node-sassをアップデートし、中のLibSassを3.3.6(v3系の最終バージョン)にすればRuby Sassとの互換性も100%になると思われる。しかしその場合のBrackets-sassの動作保証はできない。
この説明でわからない場合はBrackets-sassでのコンパイルをやめ、gulpなどを利用する方が良いだろう。その方が新しいLibSassが期待できる。
## Dreamweaver
[CC(2017)からCSSプリプロセッサーのサポートが入った](http://www.adobe.com/jp/products/dreamweaver/features.html)ので、Creative Cloud版を使って入れば他は何もしなくてもプロジェクトルートをサイト管理しておけばSass/SCSSコンパイルが可能。
コンパイラが何なのか気になって調べたけど確たる記述はすぐには見つからなかった。ただ[CompassやBurbonをサポートしていることから、おそらくRuby Sassだろう](https://helpx.adobe.com/jp/dreamweaver/using/css-preprocessors.html)。
<del>コンパイラが何なのか気になって調べたけど確たる記述はすぐには見つからなかった。ただ[CompassやBurbonをサポートしていることから、おそらくRuby Sassだろう](https://helpx.adobe.com/jp/dreamweaver/using/css-preprocessors.html)。</del>
<ins datetime="2017-09-10T13:05+09:00">ソフトウェアをインストールしてappファイルの中身をgrepしたところ、`/Contents/Resources/gems/rubygems/specifications/sass-3.4.19.gemspec`があった。つまりRuby Sassであり、Sassのバージョンは3.4.19となる。[そうさんありがとう](https://twitter.com/sou_lab/status/910090655396896768)。やっぱり空は青い。</ins>
## 一覧
| エディター | プラグイン | コンパイラ | あらかじめ必要なこと |
| ------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| Sublime Text | [Sass Build](https://github.com/jaumefontal/SASS-Build-SublimeText2) | Ruby Sass | `gem install sass` |
| Atom | [sass-autocompile](https://atom.io/packages/sass-autocompile) | LibSass | `npm install node-sass -g` |
| Coda 2 | [Coda Sass Plugin](https://github.com/secca/Coda-Sass-Plug-in) | Ruby Sass | `gem install sass` |
| Vim | [sass-compile.vim](https://github.com/AtsushiM/sass-compile.vim) | Ruby Sass | `gem install sass` |
| VSCode | なし(taks.jsonに記述) | LibSass | `npm install node-sass -g` |
| WebStorm | なし(File Watcherで実行) | Ruby Sass/LibSass | 初期テンプレートの場合は`gem install sass`/LibSassを利用する場合はLibSassのインストールとビルド |
| Brackets | [brackets-sass](https://github.com/jasonsanjose/brackets-sass) | LibSass | なし。ただし現時点のプラグインが利用してるLibSassが3.1で古いので対処が必要 |
| Dreamweaver | なし | おそらくRuby Sass | CC(2017)以上。プロジェクトルートのサイト管理 |
<table>
<thead>
<tr>
<th>エディター</th>
<th>プラグイン</th>
<th>コンパイラ</th>
<th>あらかじめ必要なこと</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sublime Text</td>
<td>
<a href="https://github.com/jaumefontal/SASS-Build-SublimeText2">Sass Build</a>
</td>
<td>Ruby Sass</td>
<td><code>gem install sass</code></td>
</tr>
<tr>
<td>Atom</td>
<td>
<a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a>
</td>
<td>LibSass</td>
<td><code>npm install node-sass -g</code></td>
</tr>
<tr>
<td>Coda 2</td>
<td>
<a href="https://github.com/secca/Coda-Sass-Plug-in">Coda Sass Plugin</a>
</td>
<td>Ruby Sass</td>
<td><code>gem install sass</code></td>
</tr>
<tr>
<td>Vim</td>
<td>
<a href="https://github.com/AtsushiM/sass-compile.vim">sass-compile.vim</a>
</td>
<td>Ruby Sass</td>
<td><code>gem install sass</code></td>
</tr>
<tr>
<td rowspan="3">VSCode</td>
<td>なし(taks.jsonに記述)</td>
<td>LibSass</td>
<td><code>npm install node-sass -g</code></td>
</tr>
<tr>
<td>
<a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass">Live Sass Compiler</a>
</td>
<td>sass.js(LibSass)</td>
<td>なし</td>
</tr>
<tr>
<td>
<a href="https://marketplace.visualstudio.com/items?itemName=spook.easysass">Easy Sass</a>
</td>
<td>sass.js(LibSass)</td>
<td>なし</td>
</tr>
<tr>
<td rowspan="2">WebStorm</td>
<td>なし(File Watcherで実行)</td>
<td>Ruby Sass</td>
<td>初期テンプレートの場合は<br><code>gem install sass</code></td>
</tr>
<tr>
<td>なし(File Watcherで実行)</td>
<td>LibSass</td>
<td>LibSassのインストールとビルド</td>
</tr>
<tr>
<td>Brackets</td>
<td>
<a href="https://github.com/jasonsanjose/brackets-sass">brackets-sass</a>
</td>
<td>LibSass</td>
<td>なし。ただし現時点のプラグインが<br>利用してるLibSassが3.1で古い</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>なし(サイト管理をする)</td>
<td>Ruby Sass</td>
<td>CC(2017)以上</td>
</tr>
</tbody>
</table>
gulp使えやと言う話はここではしていない。
「とりあえずエディタだけ入れてSassコンパイルしたい!」と思ったら、Dreamweaver CC(2017)しかなさそう。次点でBracketsだがデフォルトのLibSassが古いのはちょっと気になる。それを更新しようとするとNode.jsの環境がいる。他のエディタも全て黒い画面の干渉が必要になる
「とりあえずエディタだけ入れてSassコンパイルしたい!」と思ったら、Dreamweaver CC(2017)しかなさそう。次点でプラグインを入れればコンパイル可能なVisual Studio Code、Bracketsとなるだろう。BracketsでやるとデフォルトのLibSassが古いのはちょっと気になる。それを更新しようとするとNode.jsの環境がいる。他は全て黒い画面の干渉が必要になる
他人のよくわからないマシンでとりあえず作業しなければならなくなった時、CLIは本当に障壁になる。人の環境がどうなっているかなんてわからないし、かといって壊すこともできない。
@@ -96,3 +183,7 @@ gulp使えやと言う話はここではしていない。
---
Ruby Sassはもうないでしょうという場合、エディタだけでSass/SCSSコンパイルするのは諦めるしかない。[Sass Meister](https://www.sassmeister.com/)を使おう。でもファイル分割していたら全てを諦めよう。今日は空が青い。
---
<ins datetime="2017-09-10T13:05+09:00">2017-09-10、VS CodeのプラグインとDreamweaverの内部のSassのことを追記。それに伴い本文と一覧表を変更した。詳細な差分は[GitHub](https://github.com/oti/dskd/commits/master)を参照のこと。</ins>

0 comments on commit 9d5a5c0

Please sign in to comment.