シンプルにSassを使い倒す忘備録

カテゴリー︎： 【Sass】

多分これだけあれば十分

sassコマンド忘備録

mixinしてsassを監視して、cssを生成する

↓下記のディレクトリだとする

ターミナルでコマンドをうつ

sass _style.scss:style.css -w

↑上記のコマンドをうつと
.sass-cacheのフォルダ
.style.css.map
.style.css
が生成された

この中で最終的にサーバーにUPするのは、

コンパイル生成された「style.css」のみ

要するに、

_style.scss は　

_mixin.scss
と
_set.scss
をインクルードしているので

_style.scssだけを監視してあげれば、

sassファイルを修正して保存するたびに、

style.cssファイルが最新版に更新される。

編集作業が終わり、あとはサーバーにUPするまえに

余計なコメントと空白を削除して、

cssを圧縮することでサイト表示の時間が短縮される

結果的にユーザビリティ向上につながるので、圧縮しておいたほうが良い！

ミニファイ（minify）という

sass _style.scss:style.css --style compressed

この上記のコマンドで、圧縮できた

*{margin:0;padding:0;-webkit-appearance:none}body{width:100%;height:auto;font-style:normal;font-family:"ヒラギノ角ゴ Pro W3", "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif}.sample{background:url(http://faq.tank.jp/skill/images/hoge/bg_image.png)}.boxA{margin:30px 0;padding:10px;background:red}.boxB{margin:0 0 50px;padding:30px;background:green}

このやり方を覚えてしまうと、

sassが便利すぎて

sassを使わないコーディングはできなくなる。。。