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
WIndows7 のプロダクトキーで Windows10 のクリーンインストールが出来た件
元々 Windwos7 が入っていた ノート PC、ACER ASPIRE ONE 722。

20180813-133629-005_r.jpg

いったん LinuxLite をインストールして使ってたのですが、訳あって Windwos10 を入れる必要が出てきました。

Windows10 のクリーンインストールで Windows7 や 8 のプロダクトキーが使えるようになった、ということなので、さっそく試してみると成功!


こんな流れでした。


▼ 必要なもの
 ・ あらかじめ焼いておいた Windows10 のインストール DVD
 ・ 外付けDVDドライブ (USB接続)

ちなみにこの DVD は、母艦 PC 上で MediaCreationTool で DL 時だか焼く時に、 「このPC用」 のチェックは外しておくこと。
その PC 用のドライバ「しか」含めてくれず、別の PC でインストールが続行できなくなるので。


▼ ASPIRE ONE での作業

BIOS の設定で DVD ドライブの起動順を HDD 等より上位にしておく。

まずは SDD の消去をします。

Windows10 インストール DVD を外付け DVD ドライブで起動。

キーボードレイアウト選択画面で 次へ をクリックし、修復なんたらをクリック。
コマンドプロンプトを起動し、

diskpart
list disk (容量などからターゲットのディスク番号を推測)
select disk 0 (0: Win10 インストール先のディスク番号)
clean (ディスクの中身を消去)
exit
exit

でディスクを消去しておく。(この作業要らないかも)

電源を切る?を選択。

再度電源をオン。

キーボードレイアウト選択画面で 次へ をクリックし、インストール をクリック。

インストール先ドライブを選択します。
(先程消去したので空っぽになってます)
次へ をクリック

プロダクトキー入力画面 に Windows7 のプロダクトキーを入力

おー!普通に通りました!


途中こんなエラーが。

OOBERESION で問題が発生しました。
もう一度試す / スキップ

もしこれが出たら、こちらを参考にして、「もう一度試す」をクリックしたら通った。
https://support.microsoft.com/en-us/help/4020048/windows-oobe-fails-when-you-start-a-new-windows-based-computer-for-the

2番めのキーボードのレイアウト?を選べといわれ、いらねーよ、と思いつつも、スキップ出来ないようなので、言語「英語(米国)」 キーボードレイアウト「日本語」 を選んだ。

ネットワークに接続。うちの Wifi SSDI を選んで、パスワード入力で通る。

しばらく待つ。

個人情報の設定などをして、無事に Windows10 が起動しました~! ばんざーい!

20180815-202116-005.jpg

最初の時点では、スタートパネルでアイコンが ↓ マークになっているものがありましたが、
いちど再起動したら普通に表示されるようになりました。


▼ 使用感
こ~んな古い時代遅れの機種なのに、 Windows10 だと快適に動作しています。
SSD の威力と Windows10 の軽さでしょうか。すごいなー!


2018-08-15 Wed | Windows | トラックバック: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 31 -
07月 « 2018/08 » 09月
ブログ内を検索
Search this site.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。