楽ã—ã¦æ™‚é–“çŸç¸®ï¼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-
StartUp Sass + Compass [基本ã¨æ´»ç”¨]![StartUp Sass + Compass [基本ã¨æ´»ç”¨]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7768d8b0c259cc3fe69178f4113b7eb1890d4d61/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fsasscompasscmujp01-130223095651-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
「Compassã€ã€åŸºç¤Žã‹ã‚‰å¿œç”¨ã¾ã§ï¼ | æ ªå¼ä¼šç¤¾LIG
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ | DevelopersIO
IDEA * IDEA
{{#tags}}- {{label}}
{{/tags}}