投稿日：2017/03/06
更新日：2017/11/16
各位
お疲れ様です。
社内レスポンシブwebサイト制作を爆速にする
emmet拡張を作成しました。
EPRESSはもちろん、リミテッドでも使えます。
◇emmetって何
こんなの
atomにはもともと入っている・・・はず。
バージョンによるのかも
◇スニペット
sec ・・・
section>div.container.guters までを作成
col12、col6、col4、col3 ・・・
div.row>div.col.span_x までを作成
wp ・・・
/wp-content/uploads/ のパスを展開（HTML、css両方使える）
◇設定方法
【emmetの設定変更】
1. atomのファイル→環境設定→emmetを参照
※emmet拡張がなければ、インストールしておいてください
2. 設定→Settings→Extensions Path
~/.atom/emmet
と入力
※~ は C:\Users\【社員番号】 までのパスを表している
【設定ファイル作成】
3. emmetフォルダを作成
C:\Users\【社員番号】\.atom の直下に作る
4. snippets.json ファイルを設置
本メール添付のsnippets.jsonを3.
5. 念のためatomを再起動
以上です。
早く終わらせて早く帰りましょう。
※2017/03/17追記
◇追加スニペット（css用）
max ・・・
@media ( max-width : 767px ) {}
min ・・・
@media ( min-width : 768px ) {}
maxhead ・・・
@media ( max-width : ($header_break_point – 1)+px ) {}
minhead ・・・
@media ( max-width : ($header_break_point – 1)+px ) {}
maxmain ・・・
@media ( max-width : ($main_slide_break_point – 1)+px ) {}
minmain ・・・
@media ( min-width : $main_slide_break_point+px ) {}
jsonみればわかる通り、
個人的によく使う表記はスニペット用意するとかするといいです。
疑似要素用のマスク・スニペットとか↓↓↓
&:bofore {
content: ”;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
活用してタイプ量削減しましょう。