npm install -g node-sass
（ 例 scss ファイルをビルドして ../../www/assets/css/ へ書き出します。 ディレクトリは適宜書き換えてください）
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "node-sass",
"args": [
"${fileBasenameNoExtension}.scss", "../../www/assets/css/${fileBasenameNoExtension}.css"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
こちらの test.scss ファイルを test.cssファイルヘ変換してみます。 test.scss
body {
color: #333;
h1 {
color: #666;
}
}
test.scss を開き、メニューの「タスク」→「ビルド タスクの実行」でビルドを実行します。 .scss ファイルから .css ファイルが生成されていることを確認します。
毎回ビルドを実行するのは面倒なので、保存した時に自動的にビルドをするように設定します。
"saveAndRun": {
"commands": [
{
"match": "\\.scss$",
"cmd": "node-sass ${fileBasenameNoExt}.scss ../../www/assets/css/${fileBasenameNoExt}.css",
"useShortcut": false
}
]
}
これで保存するだけで自動的に scss → css 変換が行われます。
Sketchのテクニック
シンボルにしたいオブジェクトを選択した状態で「Layer」→「Create Symbol」を選択してシンボルを作成。 後はそのシンボルをコピーペーストでいろんなページに配置すれば、シンボル修正時にすべてのページで反映されます
こちらのアプリ sketchtoolbox をインストールすると簡単にプラグインを追加することができます。
http://sketchtoolbox.com/
こちらのアプリ Sketchpacks for macOS も簡単にプラグインを追加することができます。
Sketchpacks for macOS
https://sketchpacks.com/
Finderのメニューから「移動」「フォルダ移動」を選択し
~/Library/Application Support/com.bohemiancoding.sketch3/Plugins
移動する。 ここにダウンロードしたプラグインファイルを置く。
・Unsplash It Sketch Plugin（Unsplash Itから自然の風景画像を取得して貼り付けてくれる）
・day-player（Unsplash Itから画像を取得して貼り付けてくれる。ぼかしエフェクト有り）
・Content Generator for Sketch（適当な人物画像データを入れてくれる）
・Craft（適当な画像を生成して貼り付けてくれる）
・sketch-iconfont（Font Awesomeなどのアイコンフォントを検索して使用できるようにする）
・Clipboard Fill（クリップボードにコピーした画像をペーストするだけでクリッピングマスク状態でペーストできる）
・Pixel Perfecter（ Command + Option + control + P で小数点の値が入っているオブジェクトを自動選択）
・Sketch Guides（「Show Rulers」で定規を表示しているときにガイドを簡単に作成する）
・Autolayout （レスポンシブ対応のwebページを作成時に自動でセンタリングをキープや背景自動伸縮など）
・Export All Text（全てのテキストオブジェクトを書き出し）
・Sketch Palettes（良い感じのカラーセットを自動で生成してくれる）
・Sketch Measure （オブジェクトの情報を簡単に調べる）
・Sketch Page Switch （ページ切り替えショートカットで行えるようにする）
・Sketch Style Inventory （スタイルを楽に扱えるようにする）
・Sketch Distributor （便利な整列プラグイン）
・Duplicator （連続して複製する）
・Rename It （レイヤー名一括変更）
・Sort Lauyers （レイヤーをソートする）
・CSSketch （cssを編集する）
・Font Finder（同じフォントを選択する）
レイヤーのスタイルをコピー ⌘ + Option + C
レイヤーのスタイルをペースト ⌘ + Option + V
レイヤーを上位に移動 ⌘ + Option + ↑
レイヤーを下位に移動 ⌘ + Option + ↑
Ctrl + C
MacWEB制作（コーディング・プログラミング）用エディター・統合開発環境（IDE）を紹介します（おすすめ順）
とにかく高速。色々パッケージを追加しても遅くなりません。
各種パッケージも豊富に揃っています。
とにかくフリーソフトで良いエディターをお探しならこれをお勧めします。
動作はかなりもったりしていますがプログラミングに必要なパッケージはほとんど揃っています。
一番最初に使うエディターとしておすすめです
https://www.jetbrains.com/phpstorm/
php 専用の統合開発環境。 （ 【IntelliJ IDEA】のPHP版 ）
色々なエディタや開発環境を試して最終的に行き着くのがこれなのかなという気がします
ある程度他のエディターのくせや良さがわかった上で使うことをおすすめします。
mac の場合ターミナルから vim と入力して起動します
ネットワーク管理者、サーバー管理者の標準エディター。 元々は unix のコマンドラインから使用できる vi エディターが拡張されたものが vim エディターです。 mac os x も unix 系 os なので標準でインストールされています。 拡張もかなり豊富で自分好みにカスタマイズしたい方にはお勧めのエディターです。
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
こちらもフリーソフト。
バージョンが上がるごとにだんだん良くなっています。