Sass/Compass よãã‚るトラブル㨠解決方法・回é¿æ–¹æ³•
14. 調整用CSSを用æ„ã™ã‚‹ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後ã®CSSã¯ç·¨é›†ç¦æ¢ --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整ã¯ã“ã¡ã‚‰ã‚’編集 --> </head> <body> <!-- ä¸ç•¥ --> </body> </html> コンパイル後ã®CSSファイルã¨ã¯åˆ¥ã« 調整用ã®CSSファイルを用æ„ã™ã‚‹
å›ã¯çŸ¥ã£ã¦ã„ã‚‹ã‹ã€ã‚ã®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ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«
解放新èžã«ã‚ˆã‚‹åœ¨ç‰¹ä¼šé–¢é€£ã®è™šå ±ã«ã¤ã„㦠- 在日特権を許ã•ãªã„市民ã®ä¼š - ニュース
This domain may be for sale!
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 �}(V ��a}(V $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ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã€çµµã‚’æã„ãŸã‚Šã€‚
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
howtohp.com
#334 Compass & CSS Sprites - RailsCasts
{{#tags}}- {{label}}
{{/tags}}