Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
Sass 3.4 rc1の新機能を見てみた
今朝TwitterのTLを見ていると、Sass 3.4に関する話題が目に入りました。Githubを見てみると、2014年7月12日にmasterブランチがBump VERSION to 3.4.0.rc.1されています。 doc-src/SASS_CHANGELOG.mdを見ると詳細が書かれていましたので、少し確認してみました。また、Sass Bites #44 - Sass 3.4 Preview という動画もありましたので、これも視聴してみました。 SassScriptで&が利用可能に Sass 3.3までは、&はセレクタ内でのみ利用可能でしたが、Sass 3.4ではSassScriptでも利用可能になったようです。 Sass Changelogにあるように$selectorに&を代入し、inspect($selector)とすると、.foo.bar .baz.bang, .bip.q
CSSプリプロセッサやポストプロセッサで出力されたCSSの整形
SassなどのCSSプリプロセッサやAutoprefixerのようなポストプロセッサを利用すると、プロセッサ規定のインデントや改行方法でCSSが整形されます。これについては@myakuraさんがAutoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryの最後で懸念事項として上げられていましたし、僕も2011年の年末にSassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒントで、Sassをカスタマイズして解決する方法を紹介したりもしました。 Autoprefixerのdependenceであるpostcss(Framework for CSS postproccessors)を見ると、Whitespacesという項があり、インデントやスペースを調整できることが解説されています。これを利用すれば、CSS Beautifyのようなことがオフライン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
