Sass/Compass よくあるトラブルと 解決方法・回避方法CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドですRead less
君は知っているか、あのCompassのstatsコマンドを！ - Qiita
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
MoOx, Freelance Developer, Front-End / Mobile & Web
Because I am an artist before being a developer, I will focus on offering the best experience to the user. That's what matter after all. Focusing on UX doesn't mean that compromises on what is under the hood are made. The right technologies have their responsibilities on the end result and they must not be neglected. Depending on your need, I will always be sure to offer you what is best to achiev
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
Sass: Documentation
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. If you’re looking for an introduction to Sass, check out the tutorial. If you want to look up a built-in Sass function,
compass使う人こそ、TincrでのCSSコーディングがかっこいい - Qiita
わりと最近までCSSは、chromeの「Sources」タブで、 リアルタイムに変更を見ながら書くのが最高だと思ってました。 が、compass/Sassを覚えるとやっぱりこれも捨てがたい。 というわけで、compassで書きつつもリアルタイム確認ができるツール探したら、ありました。 chrome拡張機能Tincrです。 Tincr Chrome Extension http://tin.cr/ Chrome ウェブストア - Tincr https://chrome.google.com/webstore/detail/tincr/lfjbhpnjiajjgnjganiaggebdhhpnbih こいつをインストールすると、おなじみchromeの開発者ツールに「Tincr」タブが追加されます。 タブごと追加するというあたりイケメンですね。 http://gyazo.com/3566609
Serve - Delicious ERB, Haml + Sass
ERB, Haml, Markdown, Textile, and more! Views, partials & layouts Perfect for Websites or HTML mockups Views, Partials & Layouts Serve provides the equivalent of the Views part of the Rails MVC. Partials and layouts make it possible to extract common parts of your website into reusable chunks and templates. Use helper methods to simplify complex logic. Sass & Compass, built in! Manage the chaos of
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
Compassでスプライト画象を高速に書き出す方法
Compassでスプライト画象を高速に書き出す方法 CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)) / 2; width: image-width(sprite-file($sprites, $name)) / 2; $ypos: round(nth(sprite-position($spri
Using Compass to generate normal and retina sprite maps
compass-retina-sprites.scss �M��GV �ݵ�GV $sprites: sprite-map("sprites/*.png"); $sprites-retina: sprite-map("sprites-retina/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-position: sprite-position($sprites, $name); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)); width: image-width(sprite-file($sprites,
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 のオススメ機能 - log
こんにちわ。 Gaji-Labo の @neotag です。今日は Less & Sass Advent calendar 2011 の24日目です。 アドベントカレンダーは乗り遅れるとネタ切れ危険ですね。 さて、 Compass という Sass 用の Framework がありまして。それがそこそこ便利なので、使い方が簡単なものをかいつまんでご紹介です。 http://compass-style.org/ インストール方法は下記のとおり。 $ gem install compass 目次 sass --watch のオプションをプロジェクトごとに管理 画像の高さと横幅を取得 Sprite を自動生成 開発用CSSと納品用CSSで画像の読み込み先を変更する 開発用と本番用で色々変えてみる ■その1 sass --watch のオプションをプロジェクトごとに管理 この記事を公開する前に確認
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
compassのベンダープリフィックス制御 « NAVER Engineers' Blog
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリ
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Standard and retina display sprites with compass – how to – PeHaa Blog
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
#334 Compass & CSS Sprites - RailsCasts