gulp-sassとgulp-postcssで快適コンパイル環境を構築 - Qiita
gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい
[Gulp][Sketch 3]これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作るでgulp-consolidateを使ったアイコン一覧を確認できるHTMLを作りました。今回は前回のデザインデータをもとにgulp-spritesmithを使って矢印のアイコンのSpriteイメージを作ります。 gulp.spritesmithについて gulp.spritesmithはSprite画像とCSSを生成できるプラグインです。Sprite画像の生成にはspritesmithを利用しています。 デザインデータ 前回も使った4つの矢印アイコンを含んだデザインデータを流用します。 プラグインとモジュールのインストール 必要なプラグインとモジュー
![[Gulp][Sketch 3]これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
ChromeのDeveloper ToolsでSassのデバッグ - Qiita
ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。 CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。 環境 OSX 10.9.5 Google Chrome 42 Sass 3.4.13 Compass 1.0.3 sourcemapの生成 Sassのコンパイル時にsourcemapを生成させる。 config.rbにsourcemap = trueを追加するだけ。 sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。 環境設定によって振り分けて、以下のように編集する。 これでSassのコンパイル時にCSSのディレクト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
usetakana.com Online