FC2ブログ
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


-------- -- | スポンサー広告 | トラックバック - | コメント -
Atom + sass で快適 css ライフ♪
最初は sass + compass というコマンドラインツールでがんばってみました。
http://kobuchicken.blog22.fc2.com/blog-entry-170.html

けど、エディタ Atom + プラグイン sass-autocompile という強力なツールがあるようなので、そっちへ乗り換えとなりました。
Atom オススメです^^

インストールと各種設定の手順はこちら。


▼ Atom / node.j / node-sass をインストール

▽ Atom は公式サイトのインストーラーで入れる。

Atom 公式サイト
https://atom.io/


▽ Node.js

Node.js
https://nodejs.org/en/

上記から安定版のインストーラーをDLしてインスト。

コマンドプロンプトで

node.j -v

としてバージョンが表示されていれば OK。


▽ node-sass

コマンドプロンプトで

npm node-sass

でインストール。

node-sass -v

としてバージョンが表示されていれば OK。


▼ Atom の設定とプラグインインストール

▽ 日本語化
File → Settings → +Install → japanese-menu と入力 → 検索された japanese-menu の下の Install をクリック

▽ テーマ設定
ファイル → 環境設定 → テーマ …で選ぶ。自分は黒よりも、慣れてる白系がいい。

▽ Atom のプラグイン sass-autocompile
ファイル → 環境設定 → +インストール → sass-autocompile と入力 → 検索されて出てきた sass-autocompile のインストールをクリック

▽ sass-autocompile の設定
適宜。
出力はとりあえず Expanded のみにチェック入れておく。完成間近になってきたら Compressed もチェック入れたら良い。
タブキーによるインデント幅を半角スペース 2 → 4 に変更しておく。

▽ sass の構文サポート?をインストールしたかも。



▼ Sass + Compass との違いは・・・

Sass + Compass
o 出力先ディレクトリが選べる (config.rb に記述する)
o 好きなエディタが選べる (Mery とか)
 x 作業開始時にコマンドプロンプトで compass watch しておかないといけない
 
Atom + sass-autocompile
o 保存すれば自動的にコンパイルしてくれる (compass watch が不要)
o 強力な入力補完機能! 折畳み、ペイン分割、e.t.c.も
o サイドバーでフォルダ&プロジェクト表示 (ファイル選択が容易)
x 出力先ディレクトリが選べない (.scss と同じフォルダに .css が自動的に出力される)


▼ css 保存先を選べないことへの対処

1. scss ファイル&フォルダ群をコピー
(仮に Wordpress + _s (underscores) テ―マだとすると・・・)
ローカルのテーマフォルダ ((root)/)wp/wp-content/themes/_s/ を開き、そこに foundation.scss と vender フォルダ、その他の必要なフォルダを放り込む。

2. FTP 転送の除外リストに加える
WinSCP などの FTP ソフト上で、*.scss を転送しない「除外設定」にする。
フォルダも転送したくないなら、
css/components/
css/forms/
css/grid/
css/prototype/
css/settings/
css/typography/
css/util/
css/vendor/
css/xy-grid/
.sass-cache/
を除外リストに追加する。(これらフォルダとその中身はローカルでの scss コンパイル時に参照されるだけなので、サーバーに転送する必要はない)

※ WinSCP の場合は、サイトマネージャーで該当のサーバー設定を開き、「転送設定」をクリック。
「ファイルマスク」欄に「|*.scss;.sass-cache/;css/components/;css/forms/;css/grid/;css/prototype/;css/settings/;css/typography/;css/util;css/vendor/;css/xy-grid/」と入力。

あとは普通に foundation.scss を Atom で編集 → 保存 → コンパイル → FTPソフトでアップロード すればOK。
スポンサーサイト


2018-08-24 Fri | ソフトウェア | トラックバック:0 | コメント:0
□ コメントの投稿
管理者にだけ表示を許可する

Thank you for visiting me !
プロフィール

kobuchicken

  • 管理人: kobuchicken
  • Linux 初心者です。XP 無しで過ごした長い長い 98 の日々。Ubuntu & 派生ディストリの有難さを感じる今日この頃です。フリーの OS がもっと身近になりますように。
  • RSS
カレンダー
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
10月 « 2018/11 » 12月
ブログ内を検索
Search this site.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。