sassに関する情報

Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」

gulpを利用しているとSassなどのコンパイルエラーが出た際にwatchなどのタスクが強制終了されてしまいます。エラー時にタスクを強制終了させないためのプラグインが「gulp-plumber」です。

続きを読む »

  • 2014年5月14日 11:25
  • カテゴリー
  • tools

gulpとnode.jsの連携

Gruntと比較してgulpがイケてるなと思うのはnode.jsつまりJavaScriptを利用してカジュアルにタスクをカスタマイズできるところです。

続きを読む »

  • 2014年5月13日 11:29
  • カテゴリー
  • tools

タスクランナーgulp入門

gulpGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。

続きを読む »

  • 2014年5月12日 18:30
  • カテゴリー
  • tools

CSSスプライトを生成する「grunt-spritesmith」

grunt-spritesmithCSSスプライトを生成するGruntモジュールです。

続きを読む »

  • 2014年4月 6日 19:00
  • カテゴリー
  • CSS

Sass/Compassでコンパイルするとカラーコードが色名になってしまう件

先日行われた「CSS Nite LP, Disk 32: Sass」で「コンパイルするとカラーコードが色名になってしまいます。」という質問を受けたので対応方法を解説します。

続きを読む »

  • 2014年2月16日 18:59
  • カテゴリー
  • CSS

新MacBook ProにインストールしたCUIアプリ

新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。

続きを読む »

  • 2014年1月20日 09:23
  • カテゴリー
  • tools

CSS Nite LP, Disk 32: Sassに出演します

CSS Nite LP32: Sass2014年2月15日(土)に行なわれる「CSS Nite LP, Disk 32: Sass」に出演します。

続きを読む »

  • 2013年11月27日 12:35
  • カテゴリー
  • seminar

Sassで&による親セレクタ参照

ネタ元:第3回 LESS記法について(中級編:ネストの応用):LESSで3倍ラクするスマートフォンコーディング|gihyo.jp … 技術評論社

この記事を読んでSassで今までこれ知らなくて損してたわーと思った機能があったのでご紹介。ネタ元はLESSですがSassでも問題なく利用できます。

続きを読む »

  • 2013年10月 9日 20:07
  • カテゴリー
  • CSS

Compassで書き出すCSSファイルを軽量化する

Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。

続きを読む »

  • 2013年9月 2日 22:52
  • カテゴリー
  • CSS

Gruntで始めるWeb制作の自動化

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。

続きを読む »

  • 2013年8月28日 01:02
  • カテゴリー
  • tools

Source MapでSass/Compassを簡単にCSSをデバッグする

Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。

続きを読む »

  • 2013年8月22日 02:53
  • カテゴリー
  • CSS

Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する

Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。

続きを読む »

  • 2013年4月 8日 19:55
  • カテゴリー
  • CSS

Google ChromeでCSSがSassの何行目に記述されているか確認する方法

Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。

続きを読む »

  • 2013年3月19日 10:36
  • カテゴリー
  • CSS

CodeKitで簡単にCSS Preprocessorを利用する!

本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。

続きを読む »

  • 2012年12月12日 11:37
  • カテゴリー
  • tools

Compassでスプライト画象を高速に書き出す方法

CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。

続きを読む »

  • 2012年12月 3日 13:56
  • カテゴリー
  • CSS

MacのCodeKitでCompassを使う

Compassに関するエントリーを書いていたら、「scoutとcodekitでそのうちできるようにならんかな」というツイートをいただきまました。

続きを読む »

  • 2012年6月18日 14:26
  • カテゴリー
  • tools

CompassでデータURI スキーム

Sassの拡張機能であるCompassを利用するとCSS スプライトだけでなくデータURI スキームも簡単に作成できます。Compassすごい。

続きを読む »

  • 2012年6月17日 12:05
  • カテゴリー
  • CSS

CompassでCSSスプライト

Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。

続きを読む »

  • 2012年6月12日 20:10
  • カテゴリー
  • CSS

購読

フィードリーダーを利用して検索結果を購読し、今後投稿されるエントリーでタグ「sass」が指定されているものにアクセスできます。 [フィードとは]

フィードを取得 フィードを取得