This domain may be for sale!
解放新èžã«ã‚ˆã‚‹åœ¨ç‰¹ä¼šé–¢é€£ã®è™šå ±ã«ã¤ã„㦠- 在日特権を許ã•ãªã„市民ã®ä¼š - ニュース
This domain may be for sale!
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 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
Sassã«ã¤ã„ã¦ã¨Compasså°Žå…¥ã‹ã‚‰åˆ©ç”¨ã¾ã§ã®ç°¡å˜ãªè§£èª¬ - blog.4uing
Sassã«ã¤ã„ã¦ã¨Compasså°Žå…¥ã‹ã‚‰åˆ©ç”¨ã¾ã§ã®ç°¡å˜ãªè§£èª¬ 2013-04-09 ã¯ã˜ã‚ã« ã“ã®ãƒšãƒ¼ã‚¸ã§ã¯Rubyã‚„Sassã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«æ‰‹é †ãªã©ã®åˆæ©çš„ãªã“ã¨ã‚„ã€é«˜åº¦ãªSassã®ä½¿ç”¨æ–¹æ³•ã«ã¤ã„ã¦ã¯ã»ã¨ã‚“ã©è§£èª¬ã•ã‚Œã¦ã„ã¾ã›ã‚“。 Sassã«èˆˆå‘³ã‚’ã‚‚ã£ã¦ã„ã‚‹æ–¹ã€ã‚‚ã—ãã¯ã™ã§ã«Sassを使用ã—ã¦ã„㦠…ã¯ã˜ã‚ã« ã“ã®ãƒšãƒ¼ã‚¸ã§ã¯Rubyã‚„Sassã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«æ‰‹é †ãªã©ã®åˆæ©çš„ãªã“ã¨ã‚„ã€é«˜åº¦ãªSassã®ä½¿ç”¨æ–¹æ³•ã«ã¤ã„ã¦ã¯ã»ã¨ã‚“ã©è§£èª¬ã•ã‚Œã¦ã„ã¾ã›ã‚“。 Sassã«èˆˆå‘³ã‚’ã‚‚ã£ã¦ã„ã‚‹æ–¹ã€ã‚‚ã—ãã¯ã™ã§ã«Sassを使用ã—ã¦ã„ã¦ã€ã“ã‚Œã‹ã‚‰Compassã‚„Bourbonã®å°Žå…¥ã‚’考ãˆã¦ã„る方を主ã«å¯¾è±¡ã¨ã—ã¦ã„ã¾ã™ã€‚ Sassã¨SCSS Sassã¨ã¯CSS3ã®æ‹¡å¼µã§ã‚ã‚Šã€ãƒã‚¹ãƒˆãƒ»å¤‰æ•°ãƒ»Mixin・セレクタã®ç¶™æ‰¿ãªã©ã®æ©Ÿèƒ½ãŒå®Ÿè£…ã•ã‚Œã¦ã„ã¾ã™ã€‚以下ã¯ãã®4ã¤ã®æ©Ÿèƒ½ã‚’使ã£ãŸã€ãƒªãƒ³ã‚¯ã¨ãã®ãƒ›ãƒãƒ¼æ™‚ã®è‰²ã‚’変更ã™ã‚‹ä¾‹ã§ã™ã€‚ $l
楽ã—ã¦æ™‚é–“çŸç¸®ï¼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-
Compassã®CSSスプライト　Retina対応ã«ã¤ã„ã¦ã„ã‚ã„ã‚ | Yuuhiro
ã“ã‚Œã ï¼ã£ã¦ã„ã†Retina対応ã—ãŸCSSスプライトã®mixinãŒãªã‹ã£ãŸã‹ã‚‰ ã„ã‚ã„ã‚ã—㟠ã„ã‚ã„ã‚ã™ã‚‹ã«ã‚ãŸã£ã¦ã“ã¡ã‚‰ã®mixinã‚’å‚考ã«ã•ã›ã¦ã„ãŸã ãã¾ã—㟠ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã™ https://gist.github.com/4072251 例： スプライト画åƒã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒª buttons 個々ã®ç”»åƒå nav01,nav02,nav03,nav04 個々ã®ç”»åƒã®ã‚µã‚¤ã‚ºãŒã™ã¹ã¦åŒã˜ãªå ´åˆ mixin @mixin all-retina-sprites($map, $dimensions: false){ $base-class: sprite-map-name($map); $child-name: nth((sprite-names($map)),1); .#{$base-class} { background: sprite-url($map) no-repea
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
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
Sass up your WordPress themes with Compass | Wynn Netherland
I’m a Rubyist. But I’m also a pragmatic front-end developer. When I have to write a full-stack solution, I pick Rails or Sinatra because writing Ruby is a joy and the Ruby ecosystem is so darn cool. But when I have to create a CMS-based site for myself or a client I love the usability and community behind WordPress. Although I can reluctantly lay Ruby aside when I extend WordPress, I really miss m
Stop Making Sprites (Compass, Sass, and PNG Sprite Generation) | Viget
Update 01/11/12: new code at the bottom of this post. Sass has been kicking around for a while, but I hadn’t given it a try until just recently. Sass usually goes hand-in-hand with Rails, Compass makes it so easy to run Sass on standalone projects that I’ve started using it on nearly everything. The result is faster, DRYer, more enjoyable coding. The biggest benefit for me has been Compass’s sprit
Susy: Responsive grids for Compass
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
Responsive Web Design Using Compass [Revised]
Surgeworks' Blog Our team talking about our company, our work, our client and each other. The responsive web design comes as a solution to better display content across tablets, mobiles phones and laptops of the most varied screen sizes and resolutions. In order to achieve a responsive layout, all we need is: a Flexible grid, Flexible Content (Images and Media) and CSS Media Queries. The use of th
![Responsive Web Design Using Compass [Revised]](https://cdn-ak-scissors.b.st-hatena.com/image/square/33d33837bd90229948e7a6750c45b3308dd98f65/height=288;version=1;width=512/http%3A%2F%2Fsurgeworks.wpengine.com%2Fwp-content%2Fuploads%2F2011%2F10%2Frwd-img-13-revision.png)
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Bourbon - A Lightweight Sass Tool Set
Sass and Compass in Action
Using Compass and Sass for CSS in your Next Project | Envato Tuts+
{{#tags}}- {{label}}
{{/tags}}