[Sass+Compass] config.rbを、制作環境でないところに置く | SONICMOOV LAB
SONICMOOV LABブログ2回目の登場。じゃじゃーん。 相変わらずソーシャルアプリのコーディングしてますココエです。 最近は、CSSメタ言語が流行っていますが、流行りに乗るか！？そうでないかはおいといて、私も一部の案件でSass(Scss)＋Compassを導入してみましたー。便利ーひゅーひゅー！ その時、Compassのプロジェクトファイル(config.rb)を、制作環境と別の場所において作業をしたくて、色々調べながら導入したわけですが、その「config.rbを、制作環境でないところに置く」時のポイントを書きたいと思います。 そもそも、なんで制作環境にプロジェクトファイル置いちゃだめなのよ？って話をすると、弊社のソーシャルゲームの制作環境においては、PHPのフレームワークを使っていたり、開発サーバーを直接さわっているので、上記のような設定ファイルがぽろっと出来ていると、 「これ
![[Sass+Compass] config.rbを、制作環境でないところに置く | SONICMOOV LAB](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7465a0622c5bbcb050f0395ce72c9d80d305521/height=288;version=1;width=512/https%3A%2F%2Flab.sonicmoov.com%2Fwp-content%2Fuploads%2F2013%2F05%2Fcompass-config-rb.png)
[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)
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。 config.rbに以下のコードを追加します。 output_style = :expanded on_stylesheet_saved do |filename| if File.exists?(filename) minifyFile = filename.gsub('.css', '.min.css') FileUtils.cp filename, minifyFile file = File.read minifyFile colon = ':' semicolon = ';' comma = ',' open_brace = ' {' close_brace =
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
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ページを開く
1216彩票-官网平台
howtohp.com