compass(23)

23follower
goto_jp さんのアバター 179views

GulpでCompassのビルドとCSSの最適化&圧縮する決定版

前提 現在GulpでSassやLessやCompassを使っている人向け より最適なCSS出力をしたい人向け 下記のディレクトリ構造を仮定 project - scss - css - .csscomb.json - config.... 2016年9月21日
goto_jp さんのアバター 276views

Compassの落とし穴:グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記のように出力さ... 2015年3月17日
goto_jp さんのアバター 273views

AipoのCSSコーディング環境(Grunt/Sass/Compass)のおさらい

Grunt/Sass/Compassとは何なのか、どのように設定され動いているのかを社内向けにおさらいの意味で記します。 Gruntとは node.jsで動くタスクランナー(監視自動実行プログラム) できること Sass/Comp... 2014年12月9日
goto_jp さんのアバター 204views

Compass:WindowsでCompassをインストールする

まずはRuby本体のインストール。 参照: http://www.rubylife.jp/install/install/index1.html 次にコマンドプロンプトを立ち上げ、下記コマンドを実行する。 gem update --s... 2014年10月27日
goto_jp さんのアバター 330views

Grunt:Compass、CoffeeScript、CSS圧縮を実行するGruntfile設定

module.exports = function (grunt) { var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ ... 2014年7月9日
goto_jp さんのアバター 233views

Sass:extendでCSSグラデーションを共用

Sassのextendを使って、グラデーション設定を使いまわしましょう。 Sass $experimental-support-for-svg: true; .gradient { @include background-image... 2014年6月27日
goto_jp さんのアバター 575views

Sass:HTMLに「clearfix」を書くのを卒業しよう

HTMLコーディングに欠かせないclearfixですが、気付けばHTML各所にclearfixの記述が多くなることがあります。 Sassのextendを使って個別にclearfixを記述することから卒業しましょう。 CSS(Sass) ... 2014年6月19日
goto_jp さんのアバター 281views

Compass(Sass):標準mixinを使いこなそう

Compassにはmixinで作らずとも標準で利用できるmixinが存在します。 ベンダープレフィックスを付けて複数書かなければならないプロパティを簡単に書けるものが多いです。 @include border-radius(0px 0p... 2014年6月18日
goto_jp さんのアバター 737views

Compass:IEにも対応したCSSグラデーションの書き方

Compassでザックリ書き出す方法です。 Scss //SVGサポートを有効に(IE9用) $experimental-support-for-svg: true; .box { //モダンブラウザ用グラデーション ... 2014年5月21日
goto_jp さんのアバター 187views

Sass:演算させずに出力する

.box { $font-size: 13px; $line-height: 25px; font: $font-size/$line-height; } 例えば上記の場合、CSS的な指示としては font プロパ... 2014年4月17日
goto_jp さんのアバター 256views

Compassで画像のパスを自動出力する

Compassの「image-url」関数を使うことで、長い画像の参照パスを意識することなくCSSコーディングすることができます。 まずCompassの設定ファイル(config.rb)に下記設定があることを前提とします。 images... 2014年4月7日
goto_jp さんのアバター 341views

Compass(Sass)で特定種類の要素を一括スタイル指定する

Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。 Sass記述 #{elements-of-type(bloc... 2014年4月2日
goto_jp さんのアバター 484views

Compass(Sass)で見出しタグを一括スタイル指定する

Compassにはh1~h6の見出し用タグを一括して処理する関数があります。 Sass記述 #{headings()} { display: inline-block; } #{headings(4)} { //h1からh4までの4... 2014年4月1日
goto_jp さんのアバター 2,898views

Compass(sass)でリセットCSSを楽に書く

ブラウザ標準のスタイルをリセットするためのCSSをCompassで一発で出力することができます。 Sass記述 1行書くだけです。 @include global-reset; 出力CSS 下記CSSがドバッと出力され一通りのタグ... 2014年3月31日
goto_jp さんのアバター 282views

CSS3の新プロパティ「columns」

名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 100px 3... 2014年3月31日
goto_jp さんのアバター 2,929views

Compass(sass)でCSSグラデーションを楽に書く

CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。Compassで用意されている標準mixinを使うことで一括で出力できます。 Sassの記述は下記になります。 $red: #f00;... 2014年3月28日
goto_jp さんのアバター 1,039views

Compass(Sass)でテキスト省略(ellipsis)を楽に書く

テキストが一定幅に収まらなかった場合「…」と省略するCSS手法に text-overflow:ellipsis を使う方法がありますが、Compassの記述を使えば一行でクロスブラウザ対応まで済ませます。 Sass側の記述は下記。 .b... 2014年3月28日
goto_jp さんのアバター 1,971views

Compass(Sass)で画像サイズを自動取得する

以前の記事で何の説明もなしにしれっと使いましたが、結構便利なCompass関数です。 .image {     width: image-width("../img/example.png");     height:... 2014年3月27日
goto_jp さんのアバター 784views

画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する

そもそも「Data URI」って何?って話ですが、例えば下記の画像。 実はスマホでGmailを表示した際に使われているアイコン画像なのですが、画像のリンクを開いたURLを見てください。外部に存在する画像を参照しているのではなく、HTM... 2014年3月20日
goto_jp さんのアバター 3,204views

ベンダープレフィックスが面倒な人に贈る、常用Compass(Sass)ミックスイン

「-webkit-」「-moz-」といったベンダープレフィックス付きで複数書かなければならないCSSプロパティは面倒ですよね。Compassミックスイン使って楽しましょう。 @include border-radius(4px 4px 0... 2014年3月20日