HOME > 開発者向けBLOG >  Sass

Technology Note 開発者向けBLOG

Sass

Sencha Touch 2.2でCSSを小さくする4つの技

この記事は、US Sencha社ブログ 4 Tricks for Smaller CSS in Sencha Touch 2.2を翻訳したものです。 最近Android 2.xのデバイス上で、ロード時間が5秒以上かかるSencha Touch 2.2で開発されたアプリケーションを最適化するチャンスがありました。その原因は1.2 MBものapp.cssファイルだったので、100K...

続きを読む

ブラウザでSassをデバッグ

ブラウザで簡単にですが、Sassをデバッグする方法をご紹介いたします。 対象ブラウザはFirefoxとChromeブラウザです。 FirefoxはアドオンからFirebugと FireSassをインストールします。 ChromeはWeb StoreからSASS Inspectorをインストールします。 インストールした後、「config.rb」に「sass_options = ...

続きを読む

Sassで変数に設定した16進数の色値をカラーネームからカラーコードで出力

Sassで変数に設定した16進数の色値をカラーネームではなく、カラーコードで出力する方法をご紹介いたします。 Sassで「$color: #ffffff;」と変数に16進数のカラーコードを設定した場合、通常CSS側では「#ffffff」が「white」とカラーネームで変換されます。 カラーネームの方がカラーコードより文字列が長い場合があり、複数の色を設定するプロパティの場合、カ...

続きを読む

プレースホルダーセレクタでクリアフィックスを継承

Sassのプレースホルダーセレクタでクリアフィックスを継承する方法をご紹介いたします。 通常の「@extend」の「.(ドット)」では使用していない状態でもセレクタを出力してしまいます。「%」のプレースホルダーセレクタは、そのセレクタ自体(ここでは「clearfix」)はCSSに出力されないので、使用していない場合、「clearfix」セレクタとそのプロパティは出力されません。...

続きを読む

Sassでベンダープレフィックスを自動で付与する

Sassを利用した場合に、「-webkit」などのベンダープレフィックスを自動で付与する方法をご紹介いたします。 通常のcssでプレフィックスを記述する場合、プロパティに記述する「-webkit-border-radius: 10px;」や値に記述する「display: -webkit-box;」があります。ここでは2通りの記述方法をご紹介いたします。 Sassファイルに「$s...

続きを読む

PAGETOP