Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
コーダー必見、SCSS・Compassで開発効率アップ｜SCSS対応IE向けCSSハック編 | DevelopersIO
はじめに SCSS使っていますか？ とても便利なSCSSですが、大きな疑問があります。 Internet Explorer（以下IE）への対応です。 CSS3が少しずつ使えるようになってきている昨今、多くのデメリットがあるにしてもエンドユーザーにIE6利用者が多ければ対応するのが僕たちコーダーです。 SCSSだとIEハックがうまく使えないかもしれない！ という疑問を解決するために、確実に使えるハックを試しながら探してみました。 先日書いたこちらの記事も合わせてどうぞ： 【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 サンプルファイル サンプルファイルはこちらからダウンロードしてください。 https://github.com/nonakaryuichi/scss_css_hacks また、動作確認用のHTMLとCSSも用意したので
compassでcssスプライトするときの出力をできるだけ少なくする試み - しるてく
概要 Sprite layouts | Compass Documentation compassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が入っていたりしてなんかしっくりこなかったので自分で実装してみた。 完成品 以下のファイルは使い回せるので、mixins/_sprite.scssみたいにプロジェクトに依存しないファイルとして置いておく。 @mixin sprite-background-size($name, $sprites, $device-pixel-ratio: 2) { $_width: image-width(sprite-file($sprites, $name)) / $device-pixel-ratio; $_height:
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
