[B! mixin] murokacoのブックマーク

murokaco id:murokaco

mixinに関するmurokacoのブックマーク (4)

Sass/Compass:Sprite自動生成のRetina対応 - Qiita
CompassのSprite自動生成は便利だがRetina対応はmixinを自作する必要がある。ググるとRetina対応の記事が複数でてくるのだけど、background-sizeが決め打ちの記事ばかり。 spriteフォルダ内の個別画像によって生成されるSprite画像のサイズが変わるのだから、background-sizeも動的に設定したい。ということで、動的にbackground-sizeに対応＋ちょっとしたパターン分けをいれたmixinを作った。 ##コード $sprite: sprite-map("sprite/*.png"); %base-sprite { background: sprite-url($sprite); @include background-size(ceil(image-width(sprite-path($sprite)) / 2), auto);
murokaco 2015/02/20
mixin

compass
リンク
Middlemanユーザーもこれを入れればすぐにズルいデザインをはじめられます！ | mah365
意外と好評いただいているzurui-sass-railsをMiddlemanに対応させたGem、zurui-sass-middlemanを作りました。これでいちいちsassファイルを引っこ抜いて来なくてもzurui-sassを使えます！使い方 1. Middlemanプロジェクト内のGemfileに追加 gem 'zurui-sass-middleman', '~> 0.0.2' 2. Sassファイルからimport @import "compass" @import "zurui-sass" ※ compass前提なので、zurui-sassを読み込む前にcompassを読み込んで下さい。 3. あとはMixinを使うだけ .box +zurui-box-outer みたいな感じでMixinを使えるようになります。 Mixin自体の効果や使い方についてはこちらのページをご覧ください。
murokaco 2014/03/25
ありがたや！

middleman

sass

mixin
リンク
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。手順やり方は下記の4つの指定をすれば良いだけです。破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
murokaco 2014/02/28
mixin、ありがたやー(-人-)

sass

mixin
リンク
[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design
あとで読みたい人は… こんにちは、@cappeeです。本格的にSass(SCSS)を仕事で使うようになってから早半年。色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。泣くほどコーディングが早くなりますよ。目次1. フォントサイズ2. テキストシャドウ2.1. 文字に1pxの黒いシャドウ2.2. 文字に1pxの白いシャドウ3. ポジション4. グラデーション4.1. 上下に明→暗4.2. 上下に暗→明4.3. IE8～9に対応する4.4. IE9に対応する5. 背景画像5.1. CSS Spriteの設定5.1.1. 文字の背景に入れる画像と文字を置換する画像5.1.2. アイコンな
murokaco 2014/02/27
sass

mixin
リンク
1