Compass CSSスプライト+Retina対応+データURIスã‚ームã®Mixin | hijiriworld Web
Posted on: 2013/06/21 Compass CSSスプライト+Retina対応+データURIスã‚ームã®Mixin [2014/06/27 æ›´æ–°] ※ Sassã¨CompassãŒä½¿ãˆã‚‹ã“ã¨ãŒå‰æ Compassã§CSSスプライトã—ã¦Retina対応ã—ã¦ãƒ‡ãƒ¼ã‚¿URLスã‚ームも行ã†ãƒŸãƒƒã‚¯ã‚¹ã‚¤ãƒ³ã‚’作ã£ãŸã®ã§ã€ãã®ãƒ¡ãƒ¢ã€‚ 準備 ディレクトリ構æˆã¯ä»¥ä¸‹ã®é€šã‚Šï¼ˆCompass標準） images/spritesディレクトリã«å¿…è¦ãªç”»åƒã‚’æ ¼ç´ã—ã¦ãŠã。 コンフィグファイルã®ç·¨é›† relative_assetsã¯ã€ãƒ˜ãƒ«ãƒ‘ー関数ã§ç”Ÿæˆã™ã‚‹URLを相対パスã‹ã€ãã‚Œã¨ã‚‚絶対パスã§è¡¨ç¾ã™ã‚‹ã‹ã®è¨å®šã€‚ ã“れをtrueã«ã™ã‚‹ã“ã¨ã§ã€ã‚¹ãƒ—ライトを生æˆã—ãŸæ™‚ã«ç›¸å¯¾ãƒ‘スã«ãªã‚‹ã®ã§è¨å®šã—ã¦ãŠãã“ã¨ã€‚ > config.rb css_dir = "css" sass_dir = "sass" images_dir
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ | DevelopersIO
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ ã¯ã˜ã‚㫠特ã«å¯’ã„今日ã“ã®é ƒã§ã™ãŒèªè€…ã®çš†æ§˜ã¯å…ƒæ°—ã«ãŠéŽã”ã—ã§ã—ょã†ã‹ï¼Ÿ 2月ã®ãƒªã‚¢å……イベントã¨ã„ãˆã°ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ã§ã™ã（ä¼æ¥æˆ¦ç•¥ï¼‰ã€‚ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ç”¨ã®ãƒãƒ§ã‚³ã‚’販売ã™ã‚‹ãŠåº—も増ãˆã¦ãã¾ã—ãŸã€‚ 弊社ã¯ç§‹è‘‰åŽŸã¨ã„ã†ç«‹åœ°ã§ã™ãŒæ„外ãªã“ã¨ã«æ—¢å©šè€…ãŒå¤šã„ã®ã§ã€Œãƒªã‚¢å……爆発ã—ã‚ã€ã¨å˜†ã男性ã¯å°‘æ•°ã®ã‚ˆã†ã§ã™ã€‚ ã¡ãªã¿ã«ãƒ“ターãƒãƒ§ã‚³ãŒå¥½ãã§ã™ã€‚ 本題 今回ã¯å°‘ã—å‰ã«åŸ·ç†ã—ãŸã€Œã‚³ãƒ¼ãƒ€ãƒ¼å¿…見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜便利ãªCSS Sprite実装編ã€ã‚’発展ã•ã›ã¦SCSS・Compassã§Retina Displayã«å¯¾å¿œã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ 事å‰ã«å¿…è¦ãªçŸ¥è˜ ã“ã®è¨˜äº‹ã§ã¯ã€ä»¥ä¸‹ã®äº‹å‰çŸ¥è˜ãŒå¿…è¦ã«ãªã‚Šã¾ã™ã€‚ 記事ä¸ã§ã‚‚解説を挟ã¿ã¾ã™ãŒã€è©³ã—ãã¯è§£èª¬ã§æ¡ˆå†…ã—ã¦ã„るページをå‚考ã«ã—ã¦ãã ã•
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Daniel Perujo
{{#tags}}- {{label}}
{{/tags}}