[Rails] TwitterBootstrapã¨Sassã¨AssetPipeline - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![[Rails] TwitterBootstrapã¨Sassã¨AssetPipeline - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/72aa6db121c1ef1c8de7a41c2f5be45dec9e2c2e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY0ODI3NCUyRmZjODI0NTE3ZWI1MWI4NWZmZGUyMzkwYTBmZGQ4YzI2NmY2ZTgyODUlMkZsYXJnZS5wbmclM0YxNTg1MTg4MDMwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWFhM2Q5YWMyM2U1YzI1NzUxYTJmNWEzNGM5Mzk3MTlj%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6b1213c527cd600118ae31c59e78541c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmFpbHMlNUQlMjBUd2l0dGVyQm9vdHN0cmFwJUUzJTgxJUE4U2FzcyVFMyU4MSVBOEFzc2V0UGlwZWxpbmUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1kNDJiODc0MTc2YzQ1MTY0Njc5OTY2OGNkZmJkMDk0NA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBraWRhY2gxJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MGRjODkwYmVlOGY1MGFmNzc3ZjNjOTdlZTNjYzliZWE%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Kr44OE44Kt%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3Defac2e49169fee6740083a41b866703a)
最近ã®RubyãªWebアプリã®æ§‹æˆ
ç§ãŒé‹ç”¨ã—ã¦ã„ã‚‹Webアプリ (Perfume Headlineã¨ã‹ã“ã®ãƒ–ãƒã‚°ã¨ã‹) ã§ä½¿ã£ã¦ã„るライブラリãªã©ã‚’紹介ã—ã¾ã™ã€‚ã¤ã¾ã‚Šã€æœ€è¿‘ã¨ã¯æœ€è¿‘æµè¡Œã‚Šã¨ã„ã†æ„味ã§ã¯ãªãã€ã‚ãã¾ã§æœ€è¿‘ç§ãŒä½¿ã£ã¦ã„ã‚‹ã¨ã„ã†æ„味ã«éŽãŽã¾ã›ã‚“。ã‚ã—ã‹ã‚‰ãšã€‚ 紹介ã™ã‚‹ã®ã¯ä»¥ä¸‹ã®ã‚‚ã®ã§ã™ã€‚ã“ã†ã‚„ã£ã¦ä¸¦ã¹ã‚‹ã¨ã»ã‚“ã¨ã«ãŸãã•ã‚“ã®ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ã«æ”¯ãˆã‚‰ã‚Œã¦ã„ã‚‹ã“ã¨ãŒã‚ã‹ã‚Šã¾ã™ã。感è¬ã—ãªãŒã‚‰ä½¿ã„ãŸã„ã§ã™ã。 Webアプリケーションフレームワーク Sinatra データベース SQLite DataMapper テンプレートエンジン Haml Sass Compass ã‚¢ã‚»ãƒƒãƒˆç®¡ç† sprockets sprockets-sass sprockets-helpers 管ç†ç”¨ã‚³ãƒžãƒ³ãƒ‰ Thor ãƒãƒƒãƒ rufus-scheduler プãƒã‚»ã‚¹èµ·å‹• foreman æ»æ´»ç›£è¦– daemontools デプãƒã‚¤ Git Webサーãƒ
Ruby Hiroba P4D（Webデザインをå¦ã³ãŸã„Rubyistã®ãŸã‚ã®ï¼‰å‚åŠ - kumamidoriã®æ—¥è¨˜
開発コミュニティã®ç‹¬ç‰¹ã®é›°å›²æ°—ã«è§¦ã‚Œã‚‰ã‚Œã¦ã€è‰¯ã„一日ã§ã—ãŸã€‚ å‚åŠ å‰ã«æ€ã£ãŸã“ã¨ã¨ã‹ インターン先ã®Railsサービスã¯ã€ãƒ•ãƒãƒ³ãƒˆãŒSass/Haml 。自分ã¯è¦‹æ…£ã‚Œã¦ã„ãªã„æ„Ÿã˜ã§ã™ã€‚ Ruby Hiroba ã®P4D（デザイナーå‘ã‘プãƒã‚°ãƒ©ãƒ 部）ã¯ã€@machidaã•ã‚“ã‚„ @ayumikoã•ã‚“ãŒã‚¹ã‚¿ãƒƒãƒ•ã‚’ã•ã‚Œã¦ã„ã‚‹ãã†ã§ã€ãœã²å‚åŠ ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã—ãŸã€‚ 告知を見ã¦ã€ã€Œå‰æ知è˜ã¯ã€Rubyã€Sassã¨Compassãªã®ã ã‚ã†ã€ã¨ã‚ãŸã‚Šã‚’ã¤ã‘ãŸã€‚ Ruby 環境ã¯ã‚る。sass/compassã¯ã€ç„¡çŸ¥ãƒ»ãƒ»ãƒ»ã€‚→å‰æ—¥ã«ãƒ‰ãƒƒãƒˆã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã‚’見ã¦ã•ã‚ã‚Šã‚’ç†è§£ã—ãŸã€‚ Sass/SCSS入門 Compass入門 Ruby Hiroba P4D ã“ã‚“ãªã«å¯æ„›ã„ステッカーを差ã—ç½®ã„ã¦ã€ã‚«ãƒ„オã®ã‚¹ãƒ†ãƒƒã‚«ãƒ¼ã¯æ®‹å¿µãªãŒã‚‰ã™ã§ã«å£²ã‚Šåˆ‡ã‚Œã€‚ ç´ æ•µã‚¹ãƒ©ã‚¤ãƒ‰ãŒå…¬é–‹ã•ã‚Œã¦ã„ã‚‹ã®ã§ã€æœ¬ç·¨ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰ã«ã¯æ›¸ãã¾ã›ã‚“。
Ruby 㧠Sass ã®ã‚«ã‚¹ã‚¿ãƒ 関数を書ã
Sass ã§é–¢æ•°ã‚’書ã方法㯠2 ã¤ã‚ã‚Šã¾ã™ã€‚ã²ã¨ã¤ã¯ Sass ã® @function ディレクティブ を使ã£ã¦ Sass ファイル内ã«å®šç¾©ã™ã‚‹æ–¹æ³•ã€‚ $grid-width: 40px; $gutter-width: 10px; @function grid-width ($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } ç°¡å˜ã‹ã¤ã‚«ã‚¸ãƒ¥ã‚¢ãƒ«ã«æ›¸ã‘ã‚‹åé¢ã€å½“然ãªãŒã‚‰ Sass ã®ãƒã‚¤ãƒ†ã‚£ãƒ–関数やディレクティブã®åˆ¶é™ã‚’å—ã‘ã‚‹ã®ã§ã€ã§ããªã„ã“ã¨ã‚‚多ã„ã§ã™ã€‚ã¨ãã« Sass ã¯æ–‡å—列系ã®é–¢æ•°ãŒã‚ã¾ã‚Šç”¨æ„ã•ã‚Œã¦ãŠã‚‰ãšã€ä¸æº€ã‚’æ„Ÿã˜ã‚‹ã“ã¨ã‚‚å°‘ãªãã‚ã‚Šã¾ã›ã‚“。 ã‚‚ã†ã²ã¨ã¤ã®æ–¹æ³•ã¯ã€Ruby ã§ã‚«ã‚¹ã‚¿ãƒ 関数を書ã„㦠Sass ã‚’æ‹¡å¼µã™ã‚‹ ã¨ã„ã†æ–¹æ³•ã§ã™ã€‚Ruby ã®çŸ¥è˜ãŒå¿…è¦ã§ã€ã‹ã¤ Sass ファイルã«ç›´æŽ¥å®šç¾©ã™ã‚‹ã®ã¨ã¯é•ã£ã¦åˆ¥ãƒ•
scss (sass) + compassãŒã‚¹ãƒ¼ãƒ‘ー便利ã§ã³ã£ãã‚Šã—ã™ãŽã¦ä»Šã•ã‚‰ç’°å¢ƒã‚’作ã£ãŸã‚Šã€‚Koalaã§ã€‚
title: scss (sass) + compassãŒã‚¹ãƒ¼ãƒ‘ー便利ã§ã³ã£ãã‚Šã—ã™ãŽã¦ä»Šã•ã‚‰ç’°å¢ƒã‚’作ã£ãŸã‚Šã€‚Koalaã§ã€‚ ※2013.06.19 ã«æ›¸ã„㟠Preprops ㌠Koala より便利ã£ã½ã„ã§ã™ã€‚ 連休ä¸ã«ãƒ†ãƒ¼ãƒžã‚’作ã‚ã†ãã†ã—よã†ã€‚ã‚ã€ã¤ã„ã§ã«scssã£ã¦ã®ã¨compassã£ã¦ã®ãŒãªã‚“ã‹ã©ã†ã‚‚便利ã£ã½ã„ã®ã§ã¡ã‚‡ã£ã¨èª¿ã¹ã¦ã¿ã‚ˆã£ã‹ãªã€‚ ã‹ã‚‰å§‹ã¾ã£ã¦ã€‚ çµè«–ã‹ã‚‰è¨€ã†ã¨ã€Œç‹‚ãŠã—ã„ã»ã©ä¾¿åˆ©ã§ä»Šã¾ã§ã¼ãã¯ä½•ã‚’ã—ã¦ãŸã‚“ã ã€ã¨ã„ã†ãƒ¬ãƒ™ãƒ«ã§ã—ãŸã€‚ 環境作るã®ã‚’忘れãªã„ãŸã‚ã«Ï†(｀д´)ﾒﾓﾒﾓ… 環境作るã®ã¯ã¡ã‚‡ã£ã¨ã‚ã‚“ã©ã†ã§ã™ãŒãŒã‚“ã°ã‚Šã¾ã—ょã†ã€‚ ※今回ã¯å…¨ã¦windows7 x64環境ã«ãªã‚Šã¾ã™ã€‚ compassã¨scssã¯ä½•ãŒã©ã†ã„ã„ã®ã‹ 論よりãªã‚“ã¡ã‚ƒã‚‰ã€ã‚‚ã†è¦‹ãŸã‚‰ã‚ã‹ã‚Šã¾ã™ã€‚scssã¯sassã®æ´¾ç”Ÿã‚‰ã—ãã€scssã®ã»ã†ãŒä½¿ã„ã‚„ã™ã‹ã£ãŸã®ã§ã¼ãã¯ãã¡ã‚‰ã‚’é¸æŠžã€‚ compassã¨
Sass + Compass ã®åŸºæœ¬å°Žå…¥ã¨è¨å®šãƒ•ã‚¡ã‚¤ãƒ« config.rb ã«ã¤ã„ã¦
明ã‘ã¾ã—ã¦ãŠã‚ã§ã¨ã†ã”ã–ã„ã¾ã™ï¼ä»Šå¹´ã‚‚ã©ã†ãžã‚ˆã‚ã—ããŠé¡˜ã„ã„ãŸã—ã¾ã™ã€‚ 2013 å¹´ã¯ã€26 å¹´ã¶ã‚Šã« 4 ã¤å…¨ã¦ã®æ•°å—ãŒç•°ãªã£ã¦ã„ã‚‹ã¿ãŸã„ã§ã™ã。ã¿ãªã•ã‚“ã©ã®ã‚ˆã†ãªãŠæ£æœˆã‚’ãŠéŽã”ã—ã§ã—ょã†ã‹ã€‚ç§ã¯å¯æ£æœˆã‚’大満喫ã—ã¾ã—ãŸã€‚ ã•ã¦ã€Windows ã§ã‚‚ Mac ã§ã‚‚ Sass + Compass 環境ãªã‚‰ã° config.rb ã§è¨å®šãŒæ›¸ã‘ã‚‹ã®ã§ã€ä»Šæ—¥ã¯ãã‚Œã«ã¤ã„ã¦ã€‚「Sass ã¨ã¯ä½•ã‹ï¼Ÿã€ã€ŒCompass ã¨ã¯ä½•ã‹ï¼Ÿã€ã¯çœãã¾ã™ã€‚インストールã‹ã‚‰è¨å®šã€æ¥½ã—ã¦ç›£è¦–開始ã€ã‚ãŸã‚Šã‚’。 Sass + Compass を使ã†ã«ã¯ï¼Ÿ ã¾ãšåŸºæœ¬ã®ã¨ã“ã‹ã‚‰ä¸€å¿œã•ã‚‰ã£ã¨ï¼ 最近ã¯ç°¡å˜ãªæ–¹æ³•ã‚‚ãŸãã•ã‚“出ã¦ã„ã¾ã™ãŒã€åœ°é“ã«ã‚„ã‚‹ãªã‚‰ã° Ruby（㨠RubyGems）を入れã¦ã€Sass 㨠Compass を入れã¦ã€ã¨ãªã‚Šã¾ã™ã€‚ Ruby + RubyGem インストール Windows ã ã£ãŸã‚‰ RubyFor
Railsプãƒã‚°ãƒ©ãƒžã¯ã“れを入れれã°ã™ãã«ã‚ºãƒ«ã„デザインをã¯ã˜ã‚られã¾ã™ï¼ | mah365
先日ã®ãƒ—ãƒã‚°ãƒ©ãƒžå‘ã‘デザイン勉強会ã§ç™ºè¡¨ã•ã‚ŒãŸã€Œå°‘ãªã„手間ã¨çŸ¥è˜ã§â€ãã‚Œãªã‚Šâ€ã«è¦‹ã›ã‚‹ã€ã‚ºãƒ«ã„デザインテクニックã€ï¼ˆby 赤塚ã•ã‚“）ã®ä¸ã«æ›¸ã‹ã‚Œã¦ã„ãŸSassã®Mixinã‚’Railsã§ä½¿ãˆã‚‹Gemã«ã—ã¦ã¿ã¾ã—ãŸã€‚ zurui-sass-rails: https://github.com/mahm/zurui-sass-rails sample: http://zurui-sample.herokuapp.com/ ã†ãŠãŠãšã‚‹ã„ï¼ï½— RT @mah_lab: .@ken_c_lo ã•ã‚“ã®ã‚ºãƒ«ã„デザインをGemã«ã—ã¦ã¿ã¾ã—ãŸã€‚ github.com/mahm/zurui-sas… サンプルã¯ã“ã¡ã‚‰ zurui-sample.herokuapp.com (based on github.com/machida/Custom…) — TAEã•ã‚“ (@ken_c_lo) 11月 7, 2012 @m
Railsエンジニアã®ãŸã‚ã®Twitter Bootstrapカスタマイズ例
Sassを使ã£ãŸã‚Šã€äººã‹ã‚‰ãƒ‘クã£ãŸã‚Šã—ã¦ã€æ¥µåŠ›å¤±æ•—ã—ãªã„方法
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Rubyistã®ãŸã‚ã®ã‚ºãƒ«ã„デザインãƒãƒ³ã‚ºã‚ªãƒ³ in RubyHiroba P4D ワークショップ
{{#tags}}- {{label}}
{{/tags}}