WebDesign Dackel

SassでBEMる時に便利なmixin

Sass+BEMでコーディングをする際に、下記のサイトにあるようなmixinを便利に使わせてもらっていたのですが、一点不満に思う箇所があったのでちょっとだけカスタマイズしてみました。 BEM Mixi...

Bootstrap無しでinput-groupを作る

Bootstrap無しでinput-groupを作る

バージョン4のalphaがリリースされたのが記憶に新しいBootstrapですが、プロトタイプの製作から実際のコーディングまで結構お世話になっています。 特にグリッドとフォーム周りのスタイルは自分で作...

コピペで使えるSass用イージング変数の一覧

コピペで使えるSass用イージング変数の一覧

スマホ専用サイトなんかでは気軽にCSS Transitionを使って簡単にアニメーションをつけることが出来るので楽しいですよね。サイトの雰囲気やコンセプトに応じて、動きに個性を付けたい場合はcubic...

Sassのextendが効かない?

プライベートでも、仕事でも最近ではほとんどSassを使って、スタイルシートを書いています。 スタイルシートを書いていく中で、僕は@extendをよく使います。Lessには無くてSassにはある、ってい...

Sassでフォントサイズをレスポンシブ対応させる荒技

Sassでフォントサイズをレスポンシブ対応させる荒技

レスポンシブなサイトを作成する時に、フォントサイズを画面幅に応じて変える必要がある場合はどのように実装しているでしょうか? 僕はサイズをremで指定して、変化を付けたい幅にブレイクポイントを設けてht...

SassのGUIツール、koalaでコンパイルエラー

Sassのコンパイルツールで有名なkoalaは使い勝手がよく、最近ずーっと使っています。 ところが、WordPressのテーマを作っているとき、エラーが出てしまってコンパイル出来ないことがありました。...