Compassで簡単、CSSスプライト作成 | 第1回 CSSスプライト作成の基礎
Compassで簡単、CSSスプライト作成 第1回 CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか？ この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com
CompassでCSSスプライト（Retina対応）
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
CompassでCSS Sprite生成（手動生成、Retina対応） - 一から勉強させてください
今回は、前回やったCompassでCSS Sprite生成〜導入、自動生成〜の続きとして、CSS Spriteの手動生成とRetina対応について書きたいと思います。 ちなみに前回と今回のサンプルをまとめてこちらに公開しております。 https://github.com/danimal141/create_css_sprite それではまずCSS Spriteの手動生成についてです。 前回は @import "compass"; $sprite_images-sprite-dimensions:true; @import "sprite_images/*.png"; @include all-sprite_images-sprites;という記述だけであっという間にスプライト用のCSSができちゃいましたが、これ以外にも同様のスタイルを生成する方法があるみたいなので試してみました。 これ。
楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。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-
DASH
Features DASH is a simple and responsive Sass/Compass-based framework for faster and easier web development. Simple and Clean DASH is a simple and clean framework. You can customize and development easier and faster. Sass/Compass DASH builds on Sass/Compass. Some variable and mixin is available from the beginning. Responsive DASH is cross device compatible. You can create a website viewable from a
Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法 | Webデザインのタネ
Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったりしてなんとかしたくなってきます。 今日はこのCompassのキャッシュの扱い方を紹介します。 キャッシュって何だ？ Sassのキャッシュとは、コンパイルの時間を短くするために作られるファイルです。compass createコマンドで作られるconfig.rbでコンパイルをすると、config.rbのファイルと同じ階層に.sass-cacheという隠しフォルダを作り、その中にキャッシュを格納しています。 普段コンパイルの時間が短いから不要じゃと思いがちですが、コードの量が多くなると体感としてコンパイル時間が遅くなってしまいます。 対策その1：キャッシュファ
Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentary
以前CSS-Tricksの記事で知ったAutoprefixerというの、ようやく試してみた。 ai/autoprefixer Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks CSS-Tricksの記事読んだほうがいいと思うけど、月一のブログ更新ノルマのためここでも書いとく。 かしこい「ポスト」プロセッサ Autoprefixerはその名前からある程度想像できる通り、ベンダー接頭辞を自動的につけたりしてくれるユーティリティ。CSSファイルを作るのではなく、CSSファイルを処理するので、ポストプロセッサと言っている。 接頭辞まわりは、すでにCompassとかのライブラリでmixinなどが用意されてるので、べつに必要ないじゃんと思うかもしれない
data URI Scheme(base64エンコード)ならSass+Compassがおすすめ | CodePlus
通常、data URI Schemeを作成しようとすると、「画像を作成→base64エンコード→CSSに記述」という流れになり、結構手間がかかります。またCSSには元の画像名などが記載されないため、元ファイルが何なのか分かりづらく、管理もしづらくなりがちです。 しかし、Sass+Compassを使用することで、簡単にdata URI Schemeを作成し、管理もしやすくすることができるようになります。 参考:CompassでデータURI スキーム scssファイルへの記述方法 以下のように、CSSでは「url」となる部分を「inline-image」に変更するだけです。 (※クォーテーションも必要です。) //サンプルアイコン .icn-sample { background-image: inline-image("img/sample.png"); } 何故、管理しやすくなるかとい
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
How to Factory Reset iPhone 15 Pro Max - Skyward Design
Ever find yourself needing to wipe your iPhone 15 Pro Max clean? Maybe you’re planning to sell it, following an iPhone guide at i5apps.com, or perhaps it’s just time for a fresh start. Whatever your reason, performing a factory reset is a straightforward process. By the end of this quick overview, you’ll know exactly how to restore your iPhone 15 Pro Max to its original factory settings. After you
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav
![[Compass] 超訳 Configuration Reference](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース