compassのsprite-mapでlayout:smartにしつつ余白の設定をしたい。 compass仕様 layout:smartとは sprite内の画像配置方法の一つ。 自動で効率よく(=幅を取らない形で)並べてくれるレイアウト。 layout:smartにした場合は余白の設定ができない。 compass本家マニュアル Configuration options do not effect the layout →余白が設定できないといより、layout:smartの場合、設定したoptionは無視されるってことだと思われる。 要件 画面全体をzoomして表示する必要がある。 問題 spriteの縦or横が長くなり過ぎると、画面をzoomした際spriteの端画像がずれが目立つ。 同様に、余白が無いとzoomした際に隣の画像がはみ出てしまうことがある。 →つまりlayout:sm
CompassのSprite自動生成は便利だがRetina対応はmixinを自作する必要がある。 ググるとRetina対応の記事が複数でてくるのだけど、background-sizeが決め打ちの記事ばかり。 spriteフォルダ内の個別画像によって生成されるSprite画像のサイズが変わるのだから、background-sizeも動的に設定したい。 ということで、 動的にbackground-sizeに対応＋ちょっとしたパターン分けをいれたmixinを作った。 ##コード $sprite: sprite-map("sprite/*.png"); %base-sprite { background: sprite-url($sprite); @include background-size(ceil(image-width(sprite-path($sprite)) / 2), auto);
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
先日、超〜久しぶりにコーディングをしました。 Retina対応の案件ということで、よさげなmixinを物色したところ、なかなかなかったので、作ってみました。 これからRetinaで苦労するであろう誰かの助けになれば嬉しいです。 今回作ってみたmixinはGitHubからダウロードできます。 https://github.com/xipx/Better-Sprites-for-Compass 使い方 1. スプライトファイルの末尾のランダムの文字列を削除する 末尾のランダムの文字列を削除しないとmixinがぐっと長くなっちゃうので、まずは以下のコードをconfig.rbにコピペしておきましょう。ファイル名も綺麗になるし、一石二鳥です。 on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename,
タイトルとおりほんとに無料すか？っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。 CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。 追記:現在は無料版はなく有料版のみっぽいです (2015.04.05) Preprocessing just got easier with Prepros Prepros 現在バージョンは1.7。Windows版のみリリースされています。 追記:バージョン2.2でMac版も出ました (2013.07.11) Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。 すでに海外の記事では「WindowsのCodekitだぜ！」みたいなことが言われてるとかいないとか。 Preprosの主な機能 Preprosの主な機能として ブ
WindowsにCompassをインストールしてSASS/SCSS環境を構築する 今更ではありますがWindowsにCompassをインストールしてSASS/SCSSの開発環境を構築してみたいと思います。 投稿日2013年04月12日 更新日2013年06月27日 SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby
一覧に戻る « 前 次 » 第6章 Sassを更に便利にする Compass 6-5 Compassの関数（Image Helpers） 画像関連の関数 画像のパスを補完をする（URL Helpers）
Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったりしてなんとかしたくなってきます。 今日はこのCompassのキャッシュの扱い方を紹介します。 キャッシュって何だ？ Sassのキャッシュとは、コンパイルの時間を短くするために作られるファイルです。compass createコマンドで作られるconfig.rbでコンパイルをすると、config.rbのファイルと同じ階層に.sass-cacheという隠しフォルダを作り、その中にキャッシュを格納しています。 普段コンパイルの時間が短いから不要じゃと思いがちですが、コードの量が多くなると体感としてコンパイル時間が遅くなってしまいます。 対策その1：キャッシュファ
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使います。 $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style : 上から順番に 何カラム使うか。上では１２カラム。 １カラムあたりの幅はどれだけか。 カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。 グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたい
こんにちわ！ Sass+Compassを導入してから、すっかりSASSってばっかりいるＷｅｂヤンキーのＡスケです！ 前置きなんていらないよって方はこちらをクリック！ … 最近、周りでもブームが起こっているようで 女に惚れSASS名言集 — SOUさん (@sou_lab) 2013年5月8日 とか ペガSASS — ぬくすさん (@nukusu) 2013年5月8日 だったり あいつ、俺のことSASSってるんじゃないか… — Ａスケ ↻Webヤンキーさん (@EisukeAkimoto) 2013年5月8日 とか大盛り上がりです。 一度この便利さを味わったら、脱することはできない夢のようなツール… しかし導入当初、Windows環境下だとCSSスプライト画像が生成されず、困り果てたことがありました。 それを解決すべく作業手順を解説します。 なお、Sass+compassの導入は済んで
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く